'use client';

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

export function Visualizer({ currentStep, isPlaying }: VisualizerProps) {
  return (
    <div className="flex items-end justify-center gap-1 h-16 px-4 py-3 bg-secondary/50 rounded-lg border border-border/50">
      {Array.from({ length: 16 }, (_, i) => {
        const isActive = isPlaying && currentStep === i;
        const isBeat = i % 4 === 0;
        const isOffbeat = i % 2 === 1;

        // Vary heights for visual interest
        const baseHeight = isBeat ? 'h-12' : isOffbeat ? 'h-6' : 'h-8';
        const activeHeight = 'h-14';

        return (
          <div
            key={i}
            className={`
              transition-all duration-50 ease-out
              ${isBeat ? 'w-4' : 'w-2.5'}
              ${isActive ? activeHeight : baseHeight}
              ${
                isActive
                  ? 'bg-gradient-to-t from-lofi-orange via-lofi-pink to-lofi-purple shadow-[0_0_12px_rgba(255,150,100,0.6)]'
                  : isBeat
                  ? 'bg-gradient-to-t from-lofi-orange/60 to-lofi-orange/30'
                  : 'bg-muted-foreground/30'
              }
              ${isBeat ? 'rounded-sm' : 'rounded-[2px]'}
            `}
          />
        );
      })}
    </div>
  );
}