import Image from "next/image"
import { AnimatedNumber } from "@/components/animated-number"
import { PublicInset, PublicSurface } from "@/components/public-surface"

interface VendingMachineCardProps {
  name: string
  description: string
  image: string
  alt: string
  selections?: number
  items?: number
}

export function VendingMachineCard({
  name,
  description,
  image,
  alt,
  selections = 0,
  items = 0,
}: VendingMachineCardProps) {
  return (
    <PublicSurface className="flex h-full flex-col overflow-hidden p-0 transition-all hover:-translate-y-0.5 hover:shadow-[0_26px_65px_rgba(0,0,0,0.12)]">
      <div className="relative aspect-[4/3] w-full bg-[radial-gradient(circle_at_top_left,rgba(196,154,52,0.14),transparent_55%),linear-gradient(180deg,rgba(247,244,236,0.72),rgba(255,255,255,0.96))]">
        <Image
          src={image}
          alt={alt}
          fill
          className="object-contain p-5"
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          priority={false}
        />
      </div>
      <div className="flex flex-1 flex-col p-5 md:p-6">
        <h3 className="text-xl font-semibold mb-2">{name}</h3>
        <p className="mb-4 flex-1 text-sm leading-relaxed text-muted-foreground">
          {description}
        </p>
        <div className="grid gap-3 sm:grid-cols-2">
          <PublicInset>
            <AnimatedNumber
              value={selections}
              className="text-2xl font-bold text-foreground"
            />
            <div className="mt-1 text-xs uppercase tracking-[0.18em] text-muted-foreground">
              Selections
            </div>
          </PublicInset>
          <PublicInset>
            <AnimatedNumber
              value={items}
              className="text-2xl font-bold text-foreground"
            />
            <div className="mt-1 text-xs uppercase tracking-[0.18em] text-muted-foreground">
              Items
            </div>
          </PublicInset>
        </div>
      </div>
    </PublicSurface>
  )
}
