import { useContext } from "react";
import CanvasContext from "../Context/canvasContext/CanvasContext";
import { Button } from "../ui/button";
import { ScrollArea } from "../ui/scroll-area";
import { X } from "lucide-react";
import ShadowCustomization from "../EachComponent/Customization/ShadowCustomization";

const ShadowPanel = () => {
  const { setSelectedPanel } = useContext(CanvasContext);
  return (
    <div>
      <div className="flex justify-between items-center p-4 border-b">
        <h2 className="text-lg font-semibold">Shadow Color</h2>
        <Button
          variant="ghost"
          size="icon"
          onClick={() => setSelectedPanel("")}
        >
          <X className="h-4 w-4" />
        </Button>
      </div>
      <ScrollArea className="lg:h-[calc(90vh-190px)]  px-4 py-4">
        <ShadowCustomization />
      </ScrollArea>
    </div>
  );
};

export default ShadowPanel;