import { useState } from 'react';
import ItemsPage from './pages/ItemsPage';
import GameDataPage from './pages/GameDataPage';
import MarketPage from './pages/MarketPage';
import SettingsPage from './pages/SettingsPage';
import OpportunitiesPage from './pages/OpportunitiesPage';
import CharacterPage from './pages/CharacterPage';
import TravelPage from './pages/TravelPage';

const PAGES = [
  { id: 'opportunities', label: 'Opportunities', component: OpportunitiesPage },
  { id: 'travel', label: 'Travel Planner', component: TravelPage },
  { id: 'character', label: 'Character', component: CharacterPage },
  { id: 'market', label: 'Market Data', component: MarketPage },
  { id: 'items', label: 'Item Browser', component: ItemsPage },
  { id: 'gamedata', label: 'Game Data', component: GameDataPage },
  { id: 'settings', label: 'Settings', component: SettingsPage },
] as const;

export default function App() {
  const [page, setPage] = useState<string>('items');
  const Active = PAGES.find((p) => p.id === page)?.component ?? ItemsPage;

  return (
    <div className="app">
      <aside className="sidebar">
        <h1>Albion Economy</h1>
        <nav>
          {PAGES.map((p) => (
            <button key={p.id} className={page === p.id ? 'active' : ''} onClick={() => setPage(p.id)}>
              {p.label}
            </button>
          ))}
        </nav>
      </aside>
      <main className="main">
        <Active />
      </main>
    </div>
  );
}