"use client";
import { motion } from "framer-motion";

export function AudioVisualizer() {
  const bars = Array.from({ length: 12 });

  return (
    <div className="flex items-center justify-center gap-1 w-full h-40 bg-[#050505] rounded-xl border border-border">
      {bars.map((_, i) => (
        <motion.div
          key={i}
          className="w-2 bg-foreground rounded-full"
          animate={{
            height: ["10%", "80%", "30%", "100%", "20%"],
          }}
          transition={{
            duration: 1.5,
            repeat: Infinity,
            repeatType: "mirror",
            ease: "easeInOut",
            delay: i * 0.1,
          }}
          style={{ height: "20%" }}
        />
      ))}
    </div>
  );
}