'use client';

import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';

interface WaveformProps {
  data: number[];
  isRecording?: boolean;
  className?: string;
}

export function Waveform({ data, isRecording, className }: WaveformProps) {
  const bars = data.length > 0 ? data : Array(64).fill(0);

  return (
    <div
      className={cn(
        'flex items-center justify-center gap-[2px] h-16 overflow-hidden',
        className
      )}
      aria-label="Audio waveform visualization"
    >
      {bars.map((value, i) => (
        <motion.div
          key={i}
          className={cn(
            'w-1 rounded-full min-h-[3px]',
            isRecording ? 'bg-destructive' : 'bg-primary/60'
          )}
          animate={{
            height: `${Math.max(3, Math.abs(value) * 60)}px`,
          }}
          transition={{ duration: 0.1 }}
        />
      ))}
    </div>
  );
}