import type { CSSProperties } from 'react';

interface WaveformProps {
  active: boolean;
}

const heights = [20, 34, 48, 30, 56, 76, 42, 64, 88, 46, 74, 36, 58, 80, 44];

export const Waveform = ({ active }: WaveformProps) => (
  <div
    aria-hidden="true"
    className={[
      'flex h-28 items-center justify-center gap-2 transition duration-500',
      active ? 'opacity-100' : 'opacity-35'
    ].join(' ')}
  >
    {heights.map((height, index) => (
      <span
        key={`${height}-${index}`}
        className={[
          'wave-bar w-1.5 rounded-full bg-cyan-200/85 shadow-[0_0_18px_rgba(103,232,249,0.55)] sm:w-2',
          active ? 'is-active' : ''
        ].join(' ')}
        style={
          {
            '--bar-index': index,
            height
          } as CSSProperties
        }
      />
    ))}
  </div>
);