'use client';

interface VisualizerProps {
  currentStep: number;
  isPlaying: boolean;
}

export function Visualizer({ currentStep, isPlaying }: VisualizerProps) {
  return (
    <div className="flex items-center justify-center gap-1.5 py-4">
      {Array.from({ length: 16 }, (_, i) => {
        const isActive = isPlaying && currentStep === i;
        const isBeat = i % 4 === 0;

        return (
          <div
            key={i}
            className={`
              transition-all duration-75
              ${isBeat ? 'w-3 h-8' : 'w-2 h-6'}
              rounded-full
              ${
                isActive
                  ? 'bg-primary scale-110 shadow-lg shadow-primary/50'
                  : isBeat
                  ? 'bg-muted-foreground/40'
                  : 'bg-muted-foreground/20'
              }
            `}
          />
        );
      })}
    </div>
  );
}