import { GameCard, type GameCardData } from './GameCard';

export function RelatedGames({ title = 'Related Games', games }: { title?: string; games: GameCardData[] }) {
  if (games.length === 0) return null;

  return (
    <section aria-labelledby="related-heading">
      <h2 id="related-heading" className="stat-label mb-3 !text-signal">
        {title}
      </h2>
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
        {games.map((g) => (
          <GameCard key={g.slug} game={g} />
        ))}
      </div>
    </section>
  );
}
