import { useContext } from "react";
import CanvasContext from "../Context/canvasContext/CanvasContext";
import TextPanel from "./TextPanel";
import ColorPanel from "./ColorPanel";

const EditorPanel = () => {
  const { selectedPanel } = useContext(CanvasContext);

  const renderPanel = () => {
    switch (selectedPanel) {
      case "text":
        return <TextPanel />;
      case "color":
        return <ColorPanel />;
      default:
        return;
    }
  };

  return (
    <>
      {selectedPanel !== "" && (
        <div className="w-80 lg:h-[calc(90vh-100px)] xl:h-[calc(100vh-100px)] bg-background rounded-xl shadow-lg mx-4 my-auto">
          {renderPanel()}
        </div>
      )}
    </>
  );
};

export default EditorPanel;