import Image from "next/image";
import Link from "next/link";
import type { Game } from "@/lib/types";

export function GameCard({ game }: { game: Pick<Game, "slug" | "title" | "cover_image" | "editor_score" | "price_type"> }) {
  return (
    <Link
      href={`/games/${game.slug}`}
      className="group block w-40 shrink-0 sm:w-48"
    >
      <div className="relative aspect-[3/4] overflow-hidden rounded-md bg-ink-800">
        {game.cover_image ? (
          <Image
            src={game.cover_image}
            alt=""
            fill
            sizes="192px"
            className="object-cover transition duration-300 group-hover:scale-105"
          />
        ) : (
          <div className="flex h-full items-center justify-center text-xs text-bone-100/40">
            No cover yet
          </div>
        )}
        {game.editor_score !== null && (
          <span className="absolute right-2 top-2 rounded bg-ink-950/85 px-1.5 py-0.5 text-xs font-semibold text-signal">
            {game.editor_score.toFixed(1)}
          </span>
        )}
      </div>
      <p className="mt-2 line-clamp-2 text-sm font-medium text-bone-50 group-hover:text-signal">
        {game.title}
      </p>
      {game.price_type && (
        <p className="text-xs capitalize text-bone-100/50">{game.price_type}</p>
      )}
    </Link>
  );
}