"use client"

import { NumberBall } from "./number-ball"

interface MatrixProps {
  total: number
  getBallState: (n: number) => "idle" | "highlighted" | "used"
  getBallColorIndex: (n: number) => number | undefined
  getBallDimmed: (n: number) => boolean
  size?: "normal" | "large" | "xlarge"
}

export function Matrix({ 
  total, 
  getBallState, 
  getBallColorIndex, 
  getBallDimmed, 
  size = "normal" 
}: MatrixProps) {
  return (
    <div className="flex flex-wrap gap-2 justify-center">
      {Array.from({ length: total }, (_, i) => i + 1).map((n) => (
        <NumberBall
          key={n}
          number={n}
          state={getBallState(n)}
          colorIndex={getBallColorIndex(n)}
          dimmed={getBallDimmed(n)}
          size={size}
        />
      ))}
    </div>
  )
}