const ddWaveCss = `
.dd-wave { display: inline-flex; align-items: center; gap: 3px; }
.dd-wave i { display: block; width: 3px; border-radius: 2px; background: currentColor; }
.dd-wave--active i { animation: dd-wave-bounce 0.9s var(--ease-in-out) infinite alternate; }
@keyframes dd-wave-bounce {
  from { transform: scaleY(0.35); }
  to   { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .dd-wave--active i { animation: none; }
}
`;

if (typeof document !== 'undefined' && !document.getElementById('dd-wave-css')) {
  const s = document.createElement('style');
  s.id = 'dd-wave-css';
  s.textContent = ddWaveCss;
  document.head.appendChild(s);
}

const DD_WAVE_PATTERN = [0.3, 0.55, 0.85, 0.45, 0.7, 1, 0.4, 0.6, 0.25, 0.8, 0.5, 0.35];

export function Waveform({ bars = 12, active = false, height = 26, color = 'var(--accent)', style }) {
  const items = [];
  for (let i = 0; i < bars; i++) {
    const h = Math.round(DD_WAVE_PATTERN[i % DD_WAVE_PATTERN.length] * height);
    items.push(<i key={i} style={{ height: Math.max(4, h), animationDelay: `${(i % 6) * 0.07}s` }}></i>);
  }
  return (
    <span className={`dd-wave${active ? ' dd-wave--active' : ''}`}
      style={{ height, color, ...style }} aria-hidden="true">
      {items}
    </span>
  );
}