import React from 'react';

interface AudioVisualizerProps {
  level: number;
  active: boolean;
}

const AudioVisualizer: React.FC<AudioVisualizerProps> = ({ level, active }) => {
  const barCount = 19;
  return (
    <div className="flex items-center justify-center gap-1.5 h-24 w-full px-4">
      {Array.from({ length: barCount }).map((_, i) => {
        const center = (barCount - 1) / 2;
        const dist = Math.abs(i - center);
        const multiplier = Math.pow(0.88, dist);
        const jitter = 0.8 + (Math.sin(i * 1.5) * 0.2);
        const height = active ? Math.max(8, level * multiplier * jitter) : 6;
        
        return (
          <div
            key={i}
            className={`w-1.5 rounded-full transition-all duration-100 ease-out border-b border-white/5 ${
              active 
                ? 'bg-teal-400 shadow-[0_0_15px_rgba(45,212,191,0.6)]' 
                : 'bg-slate-700/50'
            }`}
            style={{ 
              height: `${height}%`,
              opacity: active ? 1 - (dist / barCount) : 0.3
            }}
          />
        );
      })}
    </div>
  );
};

export default React.memo(AudioVisualizer);