import { X } from 'lucide-react';
import { useEffect } from 'react';
import clsx from 'clsx';

interface MiddleDrawer {
  isOpen: boolean;
  title: string;
  onClose: () => void;
  children: React.ReactNode;
  footer?: React.ReactNode;
  showSearch?: boolean;
  onSearch?: (val: string) => void;
}

export default function MiddleDrawer({
  isOpen,
  title,
  onClose,
  children,
  footer,
  showSearch,
  onSearch,
}: MiddleDrawer) {
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => {
      document.body.style.overflow = '';
    };
  }, [isOpen]);

  return (
    <div
      className={clsx(
        'fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-300 px-4',
        isOpen ? 'pointer-events-auto bg-black/30' : 'pointer-events-none bg-transparent'
      )}
      onClick={onClose}
    >
      {/* Modal Content */}
      <div
        className={clsx(
          'w-full max-w-[600px] bg-white shadow-xl rounded-lg overflow-hidden transform transition-transform duration-300 ease-in-out dark:bg-background',
          isOpen ? 'scale-100 opacity-100' : 'scale-90 opacity-0'
        )}
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b max-md:px-5 dark:bg-darkbg dark:border-darkborder">
          <h2 className="text-lg font-semibold max-sm:text-base dark:text-white">{title}</h2>
          <button onClick={onClose} aria-label='close'>
            <X className="w-5 h-5 text-gray-500 dark:text-neutrals300 dark:hover:text-white" />
          </button>
        </div>

        {/* Optional Search */}
        {showSearch && (
          <div className="px-6 py-3 border-b">
            <input
              type="text"
              placeholder="Type here"
              onChange={(e) => onSearch?.(e.target.value)}
              className="w-full px-3 py-2 border rounded"
            />
          </div>
        )}

        {/* Body */}
        <div className="px-6 py-6 max-h-[70vh] overflow-y-auto">
          {children}
        </div>

        {/* Footer */}
        {footer && (
          <div className="px-6 py-4 border-t border-neutrals100 bg-white dark:bg-darkbg dark:border-darkborder">
            {footer}
          </div>
        )}
      </div>
    </div>
  );
}