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

interface PlayerDotsProps {
  found: number;
  total?: number;
}

export function PlayerDots({ found, total = 10 }: PlayerDotsProps) {
  return (
    <div className="flex flex-col items-center gap-3">
      <div className="flex items-center gap-2">
        {Array.from({ length: total }, (_, i) => {
          const isFilled = i < found;
          return (
            <motion.div
              key={i}
              initial={{ scale: 0.8, opacity: 0.5 }}
              animate={{
                scale: isFilled ? [1, 1.2, 1] : 0.8,
                opacity: isFilled ? 1 : 0.3,
              }}
              transition={{
                scale: isFilled
                  ? { duration: 0.3, type: 'spring', stiffness: 500 }
                  : { duration: 0.2 },
              }}
              className={cn(
                'w-3 h-3 rounded-full transition-colors',
                isFilled ? 'bg-amber-500' : 'bg-white/20'
              )}
            />
          );
        })}
      </div>
      <p className="text-sm text-text-secondary">
        <span className="font-mono font-bold text-text-primary">{found}</span>
        <span className="text-text-muted">/{total} players found</span>
      </p>
    </div>
  );
}
