// components/modals/ui/SidePanel.tsx
"use client";

import { useEffect } from "react";
import { ArrowLeft, X } from "lucide-react";

export default function SidePanel({
  isOpen,
  onClose,
  onBack,
  title,
  children,
}: {
  isOpen: boolean;
  onClose: () => void;
  onBack?: () => void;
  title?: string;
  children: React.ReactNode;
}) {
  useEffect(() => {
    document.body.style.overflow = isOpen ? "hidden" : "";
    return () => {
      document.body.style.overflow = "";
    };
  }, [isOpen]);

  useEffect(() => {
    const handleKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    if (isOpen) window.addEventListener("keydown", handleKey);
    return () => window.removeEventListener("keydown", handleKey);
  }, [isOpen, onClose]);

  return (
    <>
      <div
        onClick={onClose}
        className={`fixed inset-0 bg-black/40 z-[150] transition-opacity duration-300 ${
          isOpen
            ? "opacity-100 pointer-events-auto"
            : "opacity-0 pointer-events-none"
        }`}
      />
      <div
        className={`fixed top-0 right-0 h-full z-[160] bg-[#f7f7f8] shadow-2xl transition-transform duration-300 ease-out
        w-full sm:w-[480px]
        ${isOpen ? "translate-x-0" : "translate-x-full"}`}
        role="dialog"
        aria-modal="true"
      >
        <div className="flex flex-col h-full">
          {/* <div className="flex items-center gap-2 px-5 py-4 bg-white border-b border-[#e5e7eb] shrink-0">
            {onBack && (
              <button
                onClick={onBack}
                className="w-9 h-9 rounded-full bg-[#f3f4f6] hover:bg-[#e5e7eb] transition-colors flex items-center justify-center border-none cursor-pointer"
              >
                <ArrowLeft size={18} className="text-[#4b5563]" />
              </button>
            )}
            <h2 className="text-[17px] font-semibold text-[#111111] flex-1">
              {title}
            </h2>
            <button
              onClick={onClose}
              className="w-9 h-9 rounded-full bg-[#f3f4f6] hover:bg-[#e5e7eb] transition-colors flex items-center justify-center border-none cursor-pointer"
            >
              <X size={18} className="text-[#4b5563]" />
            </button>
          </div> */}
          <div className="flex-1 overflow-y-auto">{children}</div>
        </div>
      </div>
    </>
  );
}