Light Lines

"use client";

import { motion } from "framer-motion";

interface LightLinesProps {
    /** Number of horizontal light beams. Default: 8 */
    lineCount?: number;
    /** Primary beam color. Default: 'indigo' */
    color?: "indigo" | "purple" | "cyan" | "pink" | "emerald";
    className?: string;
}

const colors: Record<string, { via: string; glow: string }> = {
    indigo: { via: "via-indigo-400", glow: "rgba(99,102,241,0.06)" },
    purple: { via: "via-purple-400", glow: "rgba(168,85,247,0.06)" },
    cyan: { via: "via-cyan-400", glow: "rgba(34,211,238,0.06)" },
    pink: { via: "via-pink-400", glow: "rgba(236,72,153,0.06)" },
    emerald: { via: "via-emerald-400", glow: "rgba(52,211,153,0.06)" },
};

export function LightLines({ lineCount = 8, color = "indigo", className = "" }: LightLinesProps) {
    const { via, glow } = colors[color];

    return (
        <div
            className={`relative w-full h-full overflow-hidden bg-zinc-950 ${className}`}
            aria-hidden="true"
        >
            {/* Radial ambient glow */}
            <div
                className="absolute inset-0 pointer-events-none"
                style={{
                    background: `radial-gradient(ellipse 80% 60% at 50% 50%, ${glow} 0%, transparent 70%)`,
                }}
            />

            {Array.from({ length: lineCount }).map((_, i) => {
                const topPercent = 5 + (i / (lineCount - 1)) * 90;
                const duration = 4 + i * 0.4;
                const delay = -i * 0.6;

                return (
                    <motion.div
                        key={i}
                        className={`absolute h-px w-full bg-gradient-to-r from-transparent ${via}/30 to-transparent`}
                        style={{ top: `${topPercent}%` }}
                        animate={{ opacity: [0, 0.7, 0], scaleX: [0.3, 1, 0.3] }}
                        transition={{
                            duration,
                            delay,
                            repeat: Infinity,
                            ease: "easeInOut",
                        }}
                    />
                );
            })}
        </div>
    );
}