import { Link } from "react-router-dom";

import { Game } from "../api/games";

export default function GameCard({ game }: { game: Game }) {
  const created = new Date(game.created_at).toLocaleString("de-DE");

  return (
    <Link
      to={`/games/${game.id}`}
      className="block rounded-lg border border-slate-800 bg-slate-900 p-4 hover:border-amber-500"
    >
      <div className="flex items-start justify-between gap-4">
        <h2 className="text-lg font-semibold text-slate-100">{game.name}</h2>
        {game.status === "ended" && (
          <span className="shrink-0 rounded bg-slate-700 px-2 py-1 text-xs font-semibold text-slate-300">
            Beendet
          </span>
        )}
        {game.participation_code && (
          <span className="shrink-0 rounded bg-amber-500/20 px-2 py-1 font-mono text-xs text-amber-300">
            Code: {game.participation_code}
          </span>
        )}
      </div>
      <p className="mt-1 text-sm text-slate-400">{game.description}</p>
      <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-500">
        <span>Erstellt: {created}</span>
        <span>Von: {game.creator_name}</span>
        <span>
          {game.player_count} Spieler
          {game.player_names.length > 0 && `: ${game.player_names.join(", ")}`}
        </span>
      </div>
    </Link>
  );
}