import { X } from "lucide-react";
import { Button } from "../ui/button";
import DesignPanel from "../Panel/DesignPanel";
// import TextPanel from "../Panel/TextPanel";
import ShapePanel from "../Panel/ShapePanel";

const panels = {
  design: DesignPanel,
  // text: TextPanel,
  shape: ShapePanel,
  // Add other panels as needed
};

export default function RightPanel({ activePanel }) {
  const PanelComponent = panels[activePanel] || (() => null);

  return (
    <div className="fixed right-0 top-0 h-screen w-72 border-l bg-background p-4">
      <div className="flex items-center justify-between border-b pb-4">
        <h2 className="text-lg font-semibold capitalize">{activePanel}</h2>
        <Button variant="ghost" size="icon">
          <X className="h-4 w-4" />
        </Button>
      </div>
      <PanelComponent />
    </div>
  );
}