interface GameInfoPanelProps {
  developers: string[];
  publishers: string[];
  platforms: string[];
  genres: string[];
  gameModes: string[];
  ageRating: string | null;
  releaseDate: Date | null;
  officialUrl: string | null;
}

function Row({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-baseline justify-between gap-4 border-b border-ink-line/60 py-2.5 last:border-0">
      <dt className="stat-label">{label}</dt>
      <dd className="stat-value text-right text-sm">{value}</dd>
    </div>
  );
}

export function GameInfoPanel(props: GameInfoPanelProps) {
  return (
    <aside className="hud-panel-sm p-5">
      <h2 className="stat-label mb-2 !text-signal">Game Information</h2>
      <dl>
        <Row label="Release Date" value={props.releaseDate ? props.releaseDate.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) : 'TBA'} />
        <Row label="Developer" value={props.developers.join(', ') || 'Unknown'} />
        <Row label="Publisher" value={props.publishers.join(', ') || 'Unknown'} />
        <Row label="Genres" value={props.genres.join(', ') || 'Unknown'} />
        <Row label="Platforms" value={props.platforms.join(', ') || 'Unknown'} />
        <Row label="Game Modes" value={props.gameModes.join(', ') || 'Unknown'} />
        <Row label="Age Rating" value={props.ageRating ?? 'Unrated'} />
      </dl>
      {props.officialUrl && (
        <a
          href={props.officialUrl}
          target="_blank"
          rel="noopener noreferrer nofollow"
          className="mt-4 inline-block font-mono text-xs uppercase tracking-wide text-signal hover:underline"
        >
          Official Website ↗
        </a>
      )}
    </aside>
  );
}
