import type { ReactNode } from "react";
import { X } from "lucide-react";

import { cn } from "@/lib/cn";
import { useUi } from "@/store/ui";

export function CollapsibleSidebar({
  title = "Filters",
  children,
}: {
  title?: string;
  children: ReactNode;
}) {
  const sidebarOpen = useUi((state) => state.sidebarOpen);
  const setSidebarOpen = useUi((state) => state.setSidebarOpen);

  if (!sidebarOpen) return null;

  return (
    <>
      <div
        className="fixed inset-0 z-40 bg-ctp-crust/60 backdrop-blur-sm lg:hidden"
        onClick={() => setSidebarOpen(false)}
        aria-hidden="true"
      />
      <aside
        className={cn(
          "fixed inset-y-0 left-0 z-50 flex w-72 flex-col gap-5 overflow-y-auto border-r border-ctp-surface0 bg-ctp-base p-4",
          "lg:sticky lg:inset-y-auto lg:top-20 lg:z-auto lg:w-64 lg:shrink-0 lg:overflow-visible lg:rounded-lg lg:border",
        )}
      >
        <div className="flex items-center justify-between">
          <span className="text-sm font-semibold text-ctp-subtext1">{title}</span>
          <button
            type="button"
            onClick={() => setSidebarOpen(false)}
            title="Close filters"
            className="rounded-md p-1 text-ctp-overlay0 transition hover:bg-ctp-surface0 hover:text-ctp-text lg:hidden"
          >
            <X className="h-4 w-4" />
          </button>
        </div>
        {children}
      </aside>
    </>
  );
}