"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import { X } from "lucide-react";

function Sheet({ open, onOpenChange, children }: { open: boolean; onOpenChange: (open: boolean) => void; children: React.ReactNode }) {
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm" onClick={() => onOpenChange(false)}>
      <div className="fixed inset-y-0 right-0 z-50 flex" onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>
  );
}

function SheetContent({ side = "right", className, children, ...props }: React.ComponentProps<"div"> & { side?: "right" | "left" }) {
  return (
    <div
      data-slot="sheet-content"
      className={cn(
        "bg-background flex h-full flex-col shadow-lg",
        side === "right" ? "ml-auto" : "mr-auto",
        className,
      )}
      {...props}
    >
      {children}
    </div>
  );
}

function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="sheet-header" className={cn("flex flex-col gap-1.5 p-4", className)} {...props} />;
}

function SheetTitle({ className, ...props }: React.ComponentProps<"h2">) {
  return <h2 data-slot="sheet-title" className={cn("text-lg font-semibold", className)} {...props} />;
}

export { Sheet, SheetContent, SheetHeader, SheetTitle };
