import Image from "next/image";
import Link from "next/link";
import { StatusBadge } from "../ui/StatusBadge";
import { Logo } from "../ui/Logo";
import { Spotlight } from "../ui/Spotlight";
import type { Game } from "@/lib/games";

type Props = {
  game: Game;
  /** Heading level, so the card fits the page outline. */
  as?: "h2" | "h3";
};

/**
 * Catalogue card for /games: artwork on one side, text on a solid surface on
 * the other. The home page uses its own showcase band instead — see
 * `components/home/FeaturedGame.tsx`.
 *
 * Text is deliberately NOT overlaid on the artwork. The Emberwild key art is
 * light cream and the in-game captures are bright green — cream body text on
 * top of either one was unreadable, whatever gradient was applied.
 */
export function GameCard({ game, as: Tag = "h2" }: Props) {
  const artwork = game.keyArt ?? game.banner;

  return (
    <Link
      href={`/games/${game.slug}`}
      className="group relative grid overflow-hidden rounded-2xl border border-border bg-surface transition duration-300 ease-out hover:-translate-y-1 hover:border-accent/60 hover:shadow-[0_24px_50px_-30px_rgba(0,0,0,0.9)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent md:grid-cols-2"
    >
      {/* Artwork panel — no text on top of it */}
      <div className="relative aspect-[16/10] overflow-hidden bg-surface-elevated md:aspect-auto md:min-h-[20rem]">
        {artwork ? (
          <Image
            src={artwork}
            alt={`${game.title} key art`}
            fill
            sizes="(max-width: 768px) 100vw, 50vw"
            className="object-cover transition-transform duration-700 ease-out group-hover:scale-[1.04]"
          />
        ) : (
          <div className="flex h-full w-full items-center justify-center">
            <Logo width={120} className="opacity-20" />
          </div>
        )}
      </div>

      {/* Content panel — solid background, guaranteed contrast */}
      <div className="flex flex-col items-start justify-center gap-5 p-8 lg:p-10">
        <StatusBadge status={game.status} />

        <Tag className="font-display text-3xl leading-none tracking-wider transition-colors duration-300 group-hover:text-accent sm:text-4xl">
          {game.title.toUpperCase()}
        </Tag>

        <p className="text-base leading-relaxed text-foreground-muted">
          {game.tagline}
        </p>

        <ul className="flex flex-wrap gap-2" aria-label="Genres">
          {game.genres.map((genre) => (
            <li
              key={genre}
              className="border border-border px-3 py-1 text-xs uppercase tracking-widest text-foreground-muted transition-colors duration-300 group-hover:border-accent/30 group-hover:text-foreground"
            >
              {genre}
            </li>
          ))}
        </ul>

        <span className="mt-2 inline-flex items-center gap-2 font-display text-sm tracking-widest text-accent">
          DISCOVER {game.title.toUpperCase()}
          <span
            aria-hidden
            className="inline-block transition-transform duration-300 group-hover:translate-x-1"
          >
            →
          </span>
        </span>
      </div>

      <Spotlight />
    </Link>
  );
}