import sceneLobby from '../assets/ui/scene-lobby.webp';
import { AppBottomNav } from '../components/AppBottomNav';
import { AppTopBar } from '../components/AppTopBar';
import { QuickActionRail } from '../components/QuickActionRail';
import { Signboard } from '../components/Signboard';
import type { GameId } from '../navigation';
import './Lobby.css';

interface Props {
  onSelectGame: (gameId: GameId) => void;
}

const USER = {
  nickname: '川妹子',
  playerId: '418417',
  coins: 286_840,
  diamonds: 128,
  avatarText: '川',
};

export function Lobby({ onSelectGame }: Props) {
  return (
    <div className="lobby-screen">
      <img className="lobby-screen__scene" src={sceneLobby} alt="" aria-hidden="true" />

      <AppTopBar
        nickname={USER.nickname}
        playerId={USER.playerId}
        coins={USER.coins}
        diamonds={USER.diamonds}
        avatarText={USER.avatarText}
        subtitle="VIP 3"
      />

      <main className="lobby-screen__content">
        <div className="lobby-screen__rail-wrap">
          <QuickActionRail />
        </div>

        <section className="lobby-screen__boards">
          <Signboard
            variant="hero"
            title="扯旋"
            subtitle="4人场·火爆进行中"
            onClick={() => onSelectGame('chexuan')}
          />
          <Signboard
            variant="hero"
            title="红中断勾卡"
            subtitle="4人场·血战到底"
            onClick={() => onSelectGame('mahjong')}
          />
        </section>
      </main>

      <AppBottomNav />
    </div>
  );
}
