// =============================================================
// Project editor — left tool rail: select / text / image / elements / layers.
// =============================================================
function ProjectSidebar({ activeTool, setActiveTool, onAddText, onAddImage, onOpenElements }) {
  return (
    <div className="editor-tools">
      <button className={`tool-btn ${activeTool === "select" ? "active" : ""}`} onClick={() => setActiveTool("select")}>
        <Icons.ArrowRight size={20} style={{ transform: "rotate(-45deg)" }} />
        Select
      </button>
      <button className="tool-btn" onClick={onAddText}>
        <Icons.Text size={20} />
        Text
      </button>
      <button className="tool-btn" onClick={onAddImage}>
        <Icons.Image size={20} />
        Image
      </button>
      <button
        className={`tool-btn ${activeTool === "elements" ? "active" : ""}`}
        onClick={onOpenElements}
      >
        <Icons.Shapes size={20} />
        Elements
      </button>
      <div style={{ width: 32, height: 1, background: "var(--line)", margin: "12px 0" }}></div>
      <button className="tool-btn">
        <Icons.Layers size={20} />
        Layers
      </button>
    </div>
  );
}

window.ProjectSidebar = ProjectSidebar;