import { CATALOG } from '@bg/shared/lite';
import { GameGrid } from '../components/GameGrid';
import { UPCOMING } from '../lib/catalog-ui';
import { useSession } from '../store/session';

export default function GamesPage() {
  const catalog = useSession((s) => (s.catalog.length ? s.catalog : CATALOG));
  return (
    <main className="page">
      <h1>게임 목록</h1>
      <GameGrid games={catalog.filter((g) => g.available)} />
      {UPCOMING.length > 0 && (
        <section className="stack">
          <h2>곧 나와요</h2>
          <p className="muted">{UPCOMING.join(' · ')}</p>
        </section>
      )}
    </main>
  );
}