"use client"

import Image from "next/image"
import { cn } from "@/lib/utils"

interface GameCardProps {
  id: string
  title: string
  image: string
  provider?: string
}

export function GameCard({ id, title, image, provider }: GameCardProps) {
  return (
    <div className="group cursor-pointer shrink-0 w-[160px] md:w-[180px]">
      <div className="relative aspect-[4/3] rounded-md overflow-hidden bg-brand-surface border border-white/5 transition-transform duration-300 group-hover:scale-[1.02] group-hover:border-brand-primary/50">
        <Image
          src={image}
          alt={title}
          fill
          className="object-cover"
          unoptimized
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-2">
          <button className="bg-brand-primary text-black text-[10px] font-black py-1 px-3 rounded uppercase self-center hover:bg-brand-primary-hover transition-colors">
            Play Now
          </button>
        </div>
      </div>
      <div className="mt-2 text-center">
        <h3 className="text-[11px] font-bold text-white/90 truncate group-hover:text-brand-primary transition-colors">
          {title}
        </h3>
        {provider && (
          <p className="text-[9px] text-white/40 uppercase font-medium mt-0.5">{provider}</p>
        )}
      </div>
    </div>
  )
}