import { Card, CardContent } from "@/components/ui/card"
import Image from "next/image"
import { AnimatedNumber } from "@/components/animated-number"

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 (
    <Card className="border-border/50 overflow-hidden h-full flex flex-col hover:border-secondary/50 transition-colors">
      <div className="relative aspect-[4/3] w-full bg-muted">
        <Image
          src={image}
          alt={alt}
          fill
          className="object-contain p-4"
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          priority={false}
        />
      </div>
      <CardContent className="p-6 flex-1 flex flex-col">
        <h3 className="text-xl font-semibold mb-2">{name}</h3>
        <p className="text-sm text-muted-foreground mb-4 flex-1 overflow-y-auto">{description}</p>
        <div className="flex gap-6 text-sm pt-4 border-t">
          <div>
            <AnimatedNumber
              value={selections}
              className="text-2xl font-bold text-secondary"
            />
            <div className="text-xs text-muted-foreground uppercase tracking-wide mt-1">Selections</div>
          </div>
          <div>
            <AnimatedNumber
              value={items}
              className="text-2xl font-bold text-secondary"
            />
            <div className="text-xs text-muted-foreground uppercase tracking-wide mt-1">Items</div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}