'use client'

import { FiChevronLeft, FiX } from 'react-icons/fi'

export default function AdminPanel({
    panelRef,
    maxH,
    t,
    adminClosing,
    adminEntering,
    chatDisabled,
    onToggleChat,
    onClose,
}: {
    panelRef: React.RefObject<HTMLDivElement>
    maxH: number | null
    t: (key: string) => string
    adminClosing: boolean
    adminEntering: boolean
    chatDisabled: boolean
    onToggleChat: () => void
    onClose: () => void
}) {
    return (
        <div
            ref={panelRef}
            style={maxH ? { maxHeight: `${maxH}px` } : undefined}
            className={`absolute top-full right-0 mt-2 z-[125] w-[280px] max-w-[calc(100vw-24px)] rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0c0d0e] shadow-lg overflow-hidden flex flex-col origin-top-right transform-gpu transition-[opacity,transform] duration-200 ease-[cubic-bezier(0.56,0.12,0.12,0.98)] ${adminClosing || adminEntering ? 'opacity-0 scale-95 pointer-events-none' : 'opacity-100 scale-100'
                }`}
        >
            <div className="relative flex items-center h-12 px-4 flex-shrink-0">
                <h3 className="text-base font-semibold text-gray-900 dark:text-white">
                    {t('room.admin.title')}
                </h3>
                <button
                    type="button"
                    aria-label={t('room.close')}
                    onClick={onClose}
                    className="absolute top-2 right-2 w-8 h-8 rounded-full inline-flex items-center justify-center hover:bg-gray-100 dark:hover:bg-[#1a1c21] transition-colors"
                >
                    <FiX className="w-5 h-5 text-gray-600 dark:text-gray-300" />
                </button>
            </div>

            <div className="flex-1 min-h-0 overflow-y-auto hide-scrollbar pb-4">
                <ul>
                    <li>
                        <button
                            type="button"
                            onClick={onToggleChat}
                            className="w-full text-left px-4 py-3 text-sm text-[#525661] dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-[#1a1c21] transition-colors"
                        >
                            {chatDisabled ? t('room.admin.enableChat') : t('room.admin.disableChat')}
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    )
}