import { SlidersHorizontal, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { ScrollArea } from "@/components/ui/scroll-area";

interface CategoryFiltersSheetProps {
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
  filterLabel: string;
  closeLabel: string;
  children: React.ReactNode;
}

export default function CategoryFiltersSheet({
  isOpen,
  onOpenChange,
  filterLabel,
  closeLabel,
  children,
}: CategoryFiltersSheetProps) {
  return (
    <Sheet open={isOpen} onOpenChange={onOpenChange}>
      <SheetTrigger asChild>
        <Button
          className=" border-gray-200 hover:border-gray-900 hover:bg-gray-50 transition-all duration-200 sm:hidden fixed bottom-20 right-4 rounded-[10px] cursor-pointer font-bold gap-2 z-10 shadow-lg"
          size="lg"
        >
          {filterLabel}
          <SlidersHorizontal className="h-5 w-5" />
        </Button>
      </SheetTrigger>
      <SheetContent side="left" className="w-[290px] p-0">
        <SheetHeader className="p-4 border-b text-gray-900">
          <SheetTitle className="text-gray-900">{filterLabel}</SheetTitle>
          <button
            onClick={() => onOpenChange(false)}
            className="absolute top-4 right-4 rounded-[10px] cursor-pointer ring-offset-background transition-opacity hover:opacity-100 text-gray-900"
          >
            <X className="h-4 w-4 text-gray-900" />
            <span className="sr-only">{closeLabel}</span>
          </button>
        </SheetHeader>
        <ScrollArea className="h-[calc(100vh-80px)] p-4">
          {children}
        </ScrollArea>
      </SheetContent>
    </Sheet>
  );
}