import React from "react";
import { Scene } from "./components/Scene.tsx";
import { Sidebar } from "./components/Sidebar.tsx";
import { CameraSelector } from "./components/CameraSelector.tsx";
import { ModelControls } from "./components/ModelControls.tsx";
import { BackdropUpload } from "./components/BackdropUpload.tsx";
import { useStore } from "./store/store.ts";
import "./App.css";

export const App: React.FC = () => {
  const sidebarOpen = useStore((state) => state.sidebarOpen);
  const toggleSidebar = useStore((state) => state.toggleSidebar);
  const closeSidebar = useStore((state) => state.closeSidebar);

  return (
    <section className="app">
      {!sidebarOpen && (
        <button
          className="menu-toggle"
          onClick={toggleSidebar}
          aria-label="Open sidebar"
        >
          &#9776;
        </button>
      )}
      {sidebarOpen && (
        <div className="sidebar-overlay" onClick={closeSidebar} />
      )}
      <Sidebar />
      <main className="main-content">
        <Scene />
        <aside className="overlay-controls">
          <CameraSelector />
          <BackdropUpload />
        </aside>
        <ModelControls />
      </main>
    </section>
  );
};