import type { ImageStudioApp } from "@app/app";
import { CanvasViewport } from "./CanvasViewport";
import { useAppState } from "./useAppState";
import "./index.css";

export type AppProps = {
  app: ImageStudioApp;
};

export function App({ app }: AppProps) {
  const state = useAppState(app.store);
  const zoomPercent = Math.round(state.editor.viewport.zoom * 100);

  return (
    <main className="flex min-h-screen flex-col bg-background text-foreground">
      <header className="flex h-12 items-center justify-between border-b px-4">
        <h1 className="font-semibold">Image Studio</h1>
        <div className="text-sm text-muted-foreground">
          {state.document.name} · {zoomPercent}% · {state.editor.viewport.size.w}×{state.editor.viewport.size.h}
        </div>
      </header>
      <section className="min-h-0 flex-1 bg-muted">
        <CanvasViewport store={app.store} />
      </section>
    </main>
  );
}

export default App;