import React, {useEffect} from 'react';
import clsx from 'clsx';

interface DrawerProps {
    open: boolean;
    onClose: () => void;
    title?: React.ReactNode;
    children: React.ReactNode;
    footer?: React.ReactNode;
    widthClassName?: string;
    bodyClassName?: string;
    panelClassName?: string;
}

export default function Drawer({
    open,
    onClose,
    title,
    children,
    footer,
    widthClassName = 'max-w-xl',
    bodyClassName,
    panelClassName,
}: DrawerProps): JSX.Element | null {
    useEffect(() => {
        if (!open) return;

        const handleKeyDown = (event: KeyboardEvent) => {
            if (event.key === 'Escape') {
                onClose();
            }
        };

        document.addEventListener('keydown', handleKeyDown);
        document.body.style.overflow = 'hidden';

        return () => {
            document.removeEventListener('keydown', handleKeyDown);
            document.body.style.overflow = '';
        };
    }, [open, onClose]);

    if (!open) return null;

    return (
        <div className="fixed inset-0 z-50 flex justify-end bg-black/40 backdrop-blur-sm" role="dialog" aria-modal="true">
            <div className="absolute inset-0" onClick={onClose} />
            <div className={clsx('relative z-10 flex h-full w-full flex-col overflow-hidden border-l border-gray-200 bg-white shadow-2xl dark:border-gray-800 dark:bg-gray-900', widthClassName, panelClassName)}>
                {title ? (
                    <div className="flex items-center justify-between gap-4 border-b border-gray-200 px-5 py-4 dark:border-gray-800">
                        <div className="min-w-0">
                            {typeof title === 'string' ? (
                                <h3 className="truncate text-base font-semibold text-gray-900 dark:text-white">{title}</h3>
                            ) : (
                                title
                            )}
                        </div>
                        <button
                            type="button"
                            className="inline-flex h-9 w-9 items-center justify-center rounded-lg text-gray-400 transition hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200"
                            onClick={onClose}
                        >
                            <i className="fa fa-times text-lg" />
                        </button>
                    </div>
                ) : null}
                <div className={clsx('min-h-0 flex-1 overflow-y-auto px-5 py-5', bodyClassName)}>
                    {children}
                </div>
                {footer ? (
                    <div className="flex items-center justify-end gap-2 border-t border-gray-200 px-5 py-4 dark:border-gray-800">
                        {footer}
                    </div>
                ) : null}
            </div>
        </div>
    );
}