import { STATUS_LABEL, type GameStatus } from "@/lib/games";

const tones: Record<GameStatus, string> = {
  "in-development": "border-accent/50 text-accent",
  "coming-soon": "border-accent/50 text-accent",
  released: "border-foreground/40 text-foreground",
};

/** A game still being worked on gets a live dot; a shipped one does not. */
const live: Record<GameStatus, boolean> = {
  "in-development": true,
  "coming-soon": true,
  released: false,
};

/** Production status pill. Always on a solid surface, never over artwork. */
export function StatusBadge({ status }: { status: GameStatus }) {
  return (
    <span
      className={`inline-flex items-center gap-2 border px-3 py-1 font-display text-[0.7rem] tracking-[0.25em] ${tones[status]}`}
    >
      {live[status] && (
        <span aria-hidden className="relative flex h-1.5 w-1.5">
          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-50" />
          <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-current" />
        </span>
      )}
      {STATUS_LABEL[status]}
    </span>
  );
}