import { useState } from "react";
import "./App.css";
import { GarminConnection } from "./components/GarminConnection";
import { Dashboard } from "./pages/Dashboard";
import { Profile } from "./pages/Profile";
import { ReviewQueue } from "./pages/ReviewQueue";
import { WorkoutKinds } from "./pages/WorkoutKinds";

const TABS = [
  { key: "dashboard", label: "Progression", Component: Dashboard },
  { key: "review", label: "Review Queue", Component: ReviewQueue },
  { key: "kinds", label: "Workout Kinds", Component: WorkoutKinds },
  { key: "profile", label: "Profile", Component: Profile },
] as const;

type TabKey = (typeof TABS)[number]["key"];

function App() {
  const [tab, setTab] = useState<TabKey>("dashboard");
  const Active = TABS.find((t) => t.key === tab)!.Component;

  return (
    <div className="app">
      <header className="app-header">
        <h1>smartrun</h1>
        <nav className="tabs">
          {TABS.map((t) => (
            <button
              key={t.key}
              className={t.key === tab ? "tab active" : "tab"}
              onClick={() => setTab(t.key)}
            >
              {t.label}
            </button>
          ))}
        </nav>
      </header>
      <GarminConnection />
      <main>
        <Active />
      </main>
    </div>
  );
}

export default App;