/**
 * MiniWaveform — pure SVG component for rendering waveform_peaks_mini.
 *
 * Renders pre-computed 100-point peaks as vertical bars. No WaveSurfer dependency —
 * lightweight enough to use in library/song list views for every song card.
 *
 * Props:
 *   peaks   — array of 0-1 normalized peak values (ideally 100 points), or null
 *   width   — SVG width in px
 *   height  — SVG height in px
 *   color   — bar fill color (default: teal accent)
 */

interface MiniWaveformProps {
  peaks: number[] | null;
  width: number;
  height: number;
  color?: string;
}

export function MiniWaveform({
  peaks,
  width,
  height,
  color = "#14b8a6",
}: MiniWaveformProps) {
  const isEmpty = !peaks || peaks.length === 0;

  if (isEmpty) {
    return (
      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} aria-hidden="true">
        <rect x={0} y={0} width={width} height={height} fill="rgba(255,255,255,0.06)" rx={2} />
      </svg>
    );
  }

  const barCount = peaks.length;
  const gap = 1;
  const barWidth = Math.max(1, (width - gap * (barCount - 1)) / barCount);
  const midY = height / 2;

  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} aria-hidden="true">
      {peaks.map((peak, i) => {
        const barHeight = Math.max(1, peak * height);
        const x = i * (barWidth + gap);
        const y = midY - barHeight / 2;
        return (
          <rect
            key={i}
            x={x}
            y={y}
            width={barWidth}
            height={barHeight}
            fill={color}
            rx={0.5}
          />
        );
      })}
    </svg>
  );
}