import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

interface LotoBallProps {
  value: number;
  variant?: "draw" | "machine" | "hot" | "cold" | "ghost";
  size?: "sm" | "md" | "lg";
  index?: number;
}

const sizes = {
  sm: "h-9 w-9 text-sm",
  md: "h-12 w-12 text-base",
  lg: "h-16 w-16 text-xl",
};

const variants = {
  draw: "gradient-orange text-primary-foreground shadow-[var(--shadow-glow)]",
  machine: "gradient-green text-secondary-foreground",
  hot: "gradient-orange text-primary-foreground",
  cold: "bg-muted text-muted-foreground border border-border",
  ghost: "bg-card text-foreground border border-border",
};

export function LotoBall({ value, variant = "draw", size = "md", index = 0 }: LotoBallProps) {
  return (
    <motion.div
      initial={{ scale: 0, rotate: -45 }}
      animate={{ scale: 1, rotate: 0 }}
      transition={{ delay: index * 0.07, type: "spring", stiffness: 260, damping: 18 }}
      className={cn(
        "flex shrink-0 items-center justify-center rounded-full font-display font-bold tabular-nums",
        sizes[size],
        variants[variant],
      )}
    >
      {String(value).padStart(2, "0")}
    </motion.div>
  );
}