---
import { games } from '../data/games/index.mjs';

/**
 * "Supported games: Ultima Online · Rust" — PLAN.md §16, D63.
 *
 * The one place a core page names the games, and the way it hands a reader on to them. Core
 * pages describe what a game module adds in core's words (D75); this strip is the link to
 * the page where each game says it in its own. The names come from `platform.json` through
 * `games/index.mjs`, so a third game appears here the day it is added there.
 */
interface Props {
  /** Extra class for the caller's spacing. */
  class?: string;
}

const { class: className } = Astro.props;
---

<p class:list={['games', className]}>
  <span class="games__label">Supported games</span>
  {
    games.map((game, index) => (
      <>
        {index > 0 && <span class="games__sep" aria-hidden="true">·</span>}
        <a class="games__link" href={game.href}>
          {game.name}
        </a>
      </>
    ))
  }
</p>

<style>
  .games {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.65rem;
    margin: 0;
    font-size: 0.95rem;
  }

  .games__label {
    color: var(--dim);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .games__label::after {
    content: ':';
  }

  .games__sep {
    color: var(--dim);
  }

  .games__link {
    color: var(--gold);
    font-weight: 600;
  }
</style>