import { useState } from 'react'
import BottomNav, { type TabId } from './components/BottomNav'
import Home from './pages/Home'
import Rules from './pages/Rules'
import Cards from './pages/Cards'
import Game from './pages/Game'
import Contact from './pages/Contact'

export default function App() {
  const [tab, setTab] = useState<TabId>('start')

  return (
    <div className="mx-auto min-h-dvh max-w-md pb-24">
      <main key={tab} className="rein">
        {tab === 'start' && <Home onSpielStart={() => setTab('spiel')} onRegeln={() => setTab('regeln')} />}
        {tab === 'regeln' && <Rules />}
        {tab === 'karten' && <Cards />}
        {tab === 'spiel' && <Game />}
        {tab === 'kontakt' && <Contact />}
      </main>
      <BottomNav aktiv={tab} onWechsel={setTab} />
    </div>
  )
}