"use client"

import { cn } from "@/lib/utils"
import { COLORS } from "./logic"

interface NumberBallProps {
  number: number
  state: "idle" | "highlighted" | "used"
  colorIndex?: number
  size?: "normal" | "large"
}

export function NumberBall({ number, state, colorIndex, size = "normal" }: NumberBallProps) {
  const isHighlighted = state === "highlighted"
  const borderColor = isHighlighted && colorIndex !== undefined 
    ? COLORS[colorIndex] 
    : state === "idle" ? "#e2e6ea" 
    : "#eef0f2"
  const bgColor = isHighlighted && colorIndex !== undefined 
    ? COLORS[colorIndex] 
    : "transparent"
  const textColor = isHighlighted && colorIndex !== undefined 
    ? "#ffffff" 
    : state === "idle" ? "#8a95a1" 
    : "#cdd2d8"

  return (
    <div
      className={cn(
        "flex items-center justify-center font-mono select-none transition-all duration-150",
        size === "normal" && "w-8 h-8 text-sm",
        size === "large" && "w-14 h-14 text-lg",
      )}
      style={{
        border: `1px solid ${borderColor}`,
        backgroundColor: bgColor,
        color: textColor,
      }}
    >
      {String(number).padStart(2, "0")}
    </div>
  )
}