import Image from 'next/image';
import { RatingRing } from './RatingRing';

interface GameHeroProps {
  name: string;
  tagline: string;
  coverUrl: string | null;
  releaseDate: Date | null;
  genres: string[];
  platforms: string[];
  rating: number | null;
  ratingCount: number | null;
  playUrl: string;
}

export function GameHero({
  name,
  tagline,
  coverUrl,
  releaseDate,
  genres,
  platforms,
  rating,
  ratingCount,
  playUrl,
}: GameHeroProps) {
  return (
    <section className="hud-panel mx-4 mt-6 overflow-hidden sm:mx-6 lg:mx-auto lg:max-w-7xl">
      <div className="grid gap-0 md:grid-cols-[minmax(0,1fr)_360px]">
        <div className="flex flex-col justify-center px-6 py-8 sm:px-10 sm:py-10">
          <div className="mb-3 flex flex-wrap gap-2">
            {genres.slice(0, 3).map((g) => (
              <span key={g} className="chip">
                {g}
              </span>
            ))}
          </div>

          <h1 className="text-4xl font-bold leading-tight sm:text-5xl">{name}</h1>
          <p className="prose-content mt-4 max-w-xl">{tagline}</p>

          <div className="mt-6 flex flex-wrap items-center gap-6">
            <RatingRing rating={rating} />
            <dl className="grid grid-cols-2 gap-x-8 gap-y-2 font-mono text-sm">
              <div>
                <dt className="stat-label">Released</dt>
                <dd className="stat-value">
                  {releaseDate
                    ? releaseDate.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
                    : 'TBA'}
                </dd>
              </div>
              <div>
                <dt className="stat-label">Platforms</dt>
                <dd className="stat-value">{platforms.slice(0, 3).join(', ') || 'Unknown'}</dd>
              </div>
              <div>
                <dt className="stat-label">Ratings</dt>
                <dd className="stat-value">{ratingCount ? ratingCount.toLocaleString() : '—'}</dd>
              </div>
            </dl>
          </div>

          <a href={playUrl} className="btn-primary mt-8 w-fit">
            🎮 Play Free Games on GamesJi
          </a>
        </div>

        <div className="relative min-h-[260px] md:min-h-full">
          {coverUrl ? (
            <Image
              src={coverUrl}
              alt={`${name} cover art`}
              fill
              sizes="(max-width: 768px) 100vw, 360px"
              className="object-cover"
            />
          ) : (
            <div className="flex h-full min-h-[260px] items-center justify-center bg-ink-soft font-mono text-xs uppercase tracking-widest text-haze">
              No cover art available
            </div>
          )}
          <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-ink/80 via-transparent to-transparent md:bg-gradient-to-l" />
        </div>
      </div>
    </section>
  );
}
