'use client';

// Decorative CSS-only equalizer. No audio coupling. Use when waveform shape
// doesn't matter (notification bells, generic "audio playing" affordance).

import { useMemo } from 'react';
import { usePlayerPaused } from '../../context/selectors';

type Props = {
  height: number;
  barWidth: number;
  barGap: number;
  bars?: number;
};

const BAR_COUNT = 28;

export function BarsWaveform({ height, barWidth, barGap, bars = BAR_COUNT }: Props) {
  const paused = usePlayerPaused();
  const items = useMemo(() => {
    return Array.from({ length: bars }, (_, i) => ({
      delay: `${(i % 7) * 90}ms`,
      duration: `${800 + (i % 5) * 120}ms`,
    }));
  }, [bars]);

  return (
    <div
      className="audioplayer-bars flex w-full items-center justify-between"
      style={{ height, gap: barGap }}
      data-mode="bars"
      aria-hidden="true"
    >
      {items.map((it, i) => (
        <span
          key={i}
          className="rounded-sm bg-primary"
          style={{
            width: barWidth,
            height: '40%',
            animation: paused ? undefined : `audioplayer-bar ${it.duration} ${it.delay} ease-in-out infinite`,
            transformOrigin: 'center',
          }}
        />
      ))}
    </div>
  );
}