import Link from 'next/link';
import Image from 'next/image';

export interface GameCardData {
  slug: string;
  name: string;
  coverUrl: string | null;
  genres: string[];
  releaseDate: Date | null;
  igdbRating: number | null;
}

export function GameCard({ game }: { game: GameCardData }) {
  return (
    <Link
      href={`/games/${game.slug}`}
      className="hud-panel-sm group flex flex-col overflow-hidden transition-transform hover:-translate-y-0.5 hover:shadow-signal"
    >
      <div className="relative aspect-[3/4] w-full bg-ink-soft">
        {game.coverUrl ? (
          <Image
            src={game.coverUrl}
            alt={`${game.name} cover art`}
            fill
            sizes="(max-width: 640px) 45vw, (max-width: 1024px) 22vw, 200px"
            className="object-cover transition-transform duration-300 group-hover:scale-105"
          />
        ) : (
          <div className="flex h-full items-center justify-center font-mono text-[10px] uppercase tracking-widest text-haze">
            No cover
          </div>
        )}
        {game.igdbRating != null && (
          <span className="absolute right-2 top-2 bg-ink/85 px-2 py-0.5 font-mono text-xs font-semibold tabular-nums text-gold clip-notch-sm">
            {Math.round(game.igdbRating)}
          </span>
        )}
      </div>
      <div className="flex flex-1 flex-col gap-1 p-3">
        <h3 className="line-clamp-2 font-display text-sm font-semibold leading-snug">{game.name}</h3>
        <p className="mt-auto truncate font-mono text-[11px] uppercase tracking-wide text-haze">
          {game.genres[0] ?? 'Game'} {game.releaseDate ? `· ${game.releaseDate.getFullYear()}` : ''}
        </p>
      </div>
    </Link>
  );
}
