import type { ReactNode } from "react";
import { CloseXIcon } from "../dashboard/icons";

export default function Drawer({
  open,
  onClose,
  title,
  subtitle,
  width = "560px",
  footer,
  children,
}: {
  open: boolean;
  onClose: () => void;
  title: string;
  subtitle?: string;
  width?: string;
  footer?: ReactNode;
  children: ReactNode;
}) {
  return (
    <>
      <div
        className={`fixed inset-0 z-40 bg-black/50 transition-opacity duration-300 ${
          open ? "opacity-100" : "pointer-events-none opacity-0"
        }`}
        onClick={onClose}
      />

      <div
        className={`fixed right-0 top-0 z-50 flex h-full w-full flex-col bg-white shadow-2xl transition-transform duration-300 ease-in-out sm:w-[var(--drawer-width)] ${
          open ? "translate-x-0" : "translate-x-full"
        }`}
        style={{ ["--drawer-width" as string]: width }}
      >
        <div className="flex items-start justify-between border-b border-[#E4E7EC] px-5 py-4">
          <div>
            <h2 className="text-[16px] font-semibold text-[#101828]">{title}</h2>
            {subtitle && <p className="mt-0.5 text-[12px] text-[#667085]">{subtitle}</p>}
          </div>
          <button
            type="button"
            onClick={onClose}
            className="flex h-7 w-7 items-center justify-center rounded-full text-[#667085] transition-colors hover:bg-[#F2F4F7]"
            aria-label="Close"
          >
            <CloseXIcon />
          </button>
        </div>

        <div className="thin-scrollbar flex-1 overflow-y-auto px-5 py-4">{children}</div>

        {footer && <div className="border-t border-[#E4E7EC] px-5 py-4">{footer}</div>}
      </div>
    </>
  );
}