"use client";

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

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

export default function SideDrawer({
  isOpen,
  title,
  subtitle,
  onClose,
  children,
  footer,
  showSearch,
  onSearch,
}: SideDrawerProps) {
  // Unmount the drawer when closed
  if (!isOpen) return null;

  return (
    <div
      className={clsx(
        "fixed inset-0 z-50 flex justify-end transition-opacity duration-300",
        isOpen
          ? "pointer-events-auto bg-black/30"
          : "pointer-events-none bg-transparent"
      )}
      onClick={onClose}
    >
      {/* Drawer Content */}
      <div
        className={clsx(
          "w-full max-w-[697px] max-[991px]:max-w-full max-xl:max-w-[500px] h-full bg-white shadow-xl transform dark:bg-background",
          isOpen
          ? 'translate-x-0'
          : 'translate-x-full rtl:-translate-x-full'
        )}
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b max-[380px]:px-4 max-md:flex-row-reverse max-md:shadow-headerShadow max-md:border-hidden max-md:px-5 dark:bg-darkbg dark:border-darkborder">
          <div className="hidden max-md:block"></div>
          <div className="max-md:-ml-2">
            <h2 className="text-lg font-semibold dark:text-white max-md:text-base max-md:font-medium max-md:text-neutrals800">{title}</h2>
            <span className="text-sm text-neutrals500 dark:text-neutrals400">
              {subtitle}
            </span>
          </div>
          <button onClick={onClose} className="rtl:rotate-180"> 
            <X className="w-5 h-5 text-neutrals500 dark:text-neutrals300 dark:hover:text-white max-md:hidden" />
            <div className="hidden max-md:block">
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M18.7895 11.0066H7.61953L12.4995 6.12656C12.8895 5.73656 12.8895 5.09656 12.4995 4.70656C12.1095 4.31656 11.4795 4.31656 11.0895 4.70656L4.49953 11.2966C4.10953 11.6866 4.10953 12.3166 4.49953 12.7066L11.0895 19.2966C11.4795 19.6866 12.1095 19.6866 12.4995 19.2966C12.8895 18.9066 12.8895 18.2766 12.4995 17.8866L7.61953 13.0066H18.7895C19.3395 13.0066 19.7895 12.5566 19.7895 12.0066C19.7895 11.4566 19.3395 11.0066 18.7895 11.0066Z"
                  fill="#1E293B"
                  className="dark:fill-white"
                />
              </svg>
            </div>
          </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-7 overflow-y-auto h-full max-h-[calc(100%-136px)] max-[380px]:px-4 max-sm:max-h-[calc(100%-130px)]">
          {children}
        </div>

        {/* Footer */}
        {footer && (
          <div className="px-6 py-4 border-t bg-white sticky bottom-0 max-[380px]:px-4 dark:bg-darkbg dark:border-darkborder max-md:shadow-headerShadow max-md:border-hidden">
            {footer}
          </div>
        )}
      </div>
    </div>
  );
}