import { useGameStore } from '@/state/gameStore'
import { MainMenu } from '@/ui/screens/MainMenu'
import { CampaignMap } from '@/ui/screens/CampaignMap'
import { GameScreen } from '@/ui/screens/GameScreen'
import { TomeOfRunes } from '@/ui/screens/TomeOfRunes'
import { Settings } from '@/ui/screens/Settings'
import { GameOver } from '@/ui/screens/GameOver'

export function App() {
  const screen = useGameStore((s) => s.screen)

  return (
    <div className="w-full h-full relative overflow-hidden">
      {screen === 'menu' && <MainMenu />}
      {screen === 'campaign' && <CampaignMap />}
      {screen === 'game' && <GameScreen />}
      {screen === 'tome' && <TomeOfRunes />}
      {screen === 'settings' && <Settings />}
      {screen === 'gameover' && <GameOver />}
    </div>
  )
}

export default App