import Link from "next/link";
import Image from "next/image";
import type { Game } from "@afterlife/shared";

interface GameCardProps {
  game: Game;
  locale: string;
}

export function GameCard({ game, locale }: GameCardProps) {
  const statusColors = {
    online: "bg-green-500",
    maintenance: "bg-yellow-500",
    coming_soon: "bg-blue-500",
  };

  return (
    <Link href={`/${locale}/games/${game.slug}`} className="group block">
      <div className="relative overflow-hidden rounded-lg bg-gray-900 border border-white/5 hover:border-white/20 transition-all">
        {game.coverImage && (
          <div className="relative aspect-[16/9] overflow-hidden">
            <Image
              src={game.coverImage.url}
              alt={game.coverImage.alternativeText || game.title}
              fill
              className="object-cover group-hover:scale-105 transition-transform duration-500"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent" />
          </div>
        )}
        <div className="p-4">
          <div className="flex items-center gap-2 mb-2">
            <span className={`w-2 h-2 rounded-full ${statusColors[game.serverStatus]}`} />
            <span className="text-xs text-gray-400 uppercase tracking-wider">{game.genre}</span>
          </div>
          <h3 className="text-lg font-semibold text-white group-hover:text-blue-400 transition-colors">
            {game.title}
          </h3>
          <p className="text-sm text-gray-500 mt-1">
            {game.releaseYear} – {game.shutdownYear}
          </p>
        </div>
      </div>
    </Link>
  );
}