import { useEffect } from "react";
import { useAppStore } from "@/stores/app-store";
import { AppShell } from "@/components/layout/AppShell";

export default function App() {
  const initialized = useAppStore((s) => s.initialized);
  const init = useAppStore((s) => s.init);
  const view = useAppStore((s) => s.view);

  useEffect(() => {
    init();
  }, [init]);

  if (!initialized) {
    return (
      <div className="flex h-screen items-center justify-center bg-pylon-bg">
        <span className="font-heading text-lg text-pylon-text-secondary">
          Loading...
        </span>
      </div>
    );
  }

  return (
    <AppShell>
      {view.type === "board-list" ? (
        <div className="flex h-full items-center justify-center text-pylon-text-secondary">
          Board List
        </div>
      ) : (
        <div className="flex h-full items-center justify-center text-pylon-text-secondary">
          Board View
        </div>
      )}
    </AppShell>
  );
}