"use client";

import { motion } from "motion/react";

export function AudioWave() {
    return (
        <>
            <div className="flex items-center justify-center gap-1 h-32">
                {[...Array(20)].map((_, i) => (
                    <motion.div
                        key={i}
                        custom={i}
                        variants={{
                            initial: { height: "20%" },
                            animate: (i: number) => ({
                                height: ["20%", "70%"],
                                transition: {
                                    duration: 3,
                                    repeat: Infinity,
                                    type: "spring",
                                    repeatType: "reverse",
                                    stiffness: Math.random() * 100 + 10,
                                    damping: Math.random() * 5 + 10,
                                    delay: i * 0.05,
                                },
                            }),
                        }}
                        initial="initial"
                        animate="animate"
                        className="w-2 bg-primary/50 rounded-full"
                    />
                ))}
            </div>

            <div className="flex items-center justify-center gap-1 h-32 scale-120 absolute top-0 left-0 right-0">
                {[...Array(20)].map((_, i) => (
                    <motion.div
                        key={i}
                        custom={i}
                        variants={{
                            initial: { height: "20%" },
                            animate: (i: number) => ({
                                height: ["20%", "70%"],
                                transition: {
                                    duration: 8,
                                    repeat: Infinity,
                                    type: "spring",
                                    repeatType: "reverse",
                                    stiffness: Math.random() * 100 + 10,
                                    damping: Math.random() * 5 + 10,
                                    delay: i * 0.05,
                                },
                            }),
                        }}
                        initial="initial"
                        animate="animate"
                        className="w-2 bg-primary/10 rounded-full"
                    />
                ))}
            </div>
        </>
    );
}