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

const IconPanel = () => {
  const { setSelectedPanel } = useContext(CanvasContext);
  return (
    <div>
      <div className="flex justify-between items-center p-4 border-b">
        <h2 className="text-lg font-semibold">Icons</h2>
        <Button
          variant="ghost"
          size="icon"
          onClick={() => setSelectedPanel("")}
        >
          <X className="h-4 w-4" />
        </Button>
      </div>

      <ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
        <AllIconsPage />
      </ScrollArea>
    </div>
  );
};

export default IconPanel;