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

const GroupObjectPanel = () => {
  const { setSelectedPanel } = useContext(CanvasContext);
  return (
    <div>
      <div className="flex justify-between items-center p-4 border-b">
        <h2 className="text-lg font-semibold">Group Object</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">
        <SelectObjectFromGroup />
        {/* Skew Customization */}
        <SkewCustomization />

        {/* Scale Objects */}
        <ScaleObjects />
      </ScrollArea>
    </div>
  );
};

export default GroupObjectPanel;