"use client";
import React, { useEffect, useState } from "react";
import { PathLineProps } from "react-svg-pathline";
import { motion } from "framer-motion";
interface AnimatedGradientLineProps extends PathLineProps {
    height: string;
    width: string;
    color?: string;
    className?: string;
    duration?: number;
    animate: boolean;
    first?:boolean
}

const AnimatedGradientLine = ({
    className,
    height,
    width,
    points,
    duration = 2,
    animate,
    first
}: AnimatedGradientLineProps) => {
    const [key, setKey] = useState(0);

    const getPathData = (points: Array<{ x: number; y: number }>) => {
        return points.reduce(
            (path, point, index) =>
                index === 0 ? `M ${point.x} ${point.y}` : `${path} L ${point.x} ${point.y}`,
            ""
        );
    };

    const pathData = getPathData(points);

    const gradientVariants = {
        visible: {
            // gradientTransform: ["rotate(0 0.5 0.5)","rotate(360 0.5 0.5)"] hidden for errors log,
            transition: {
                duration,
                ease: "easeInOut",
                repeat:Infinity,
                repeatType: "reverse" as const,
            },
        },
    };

    const pathVariants = {
        hidden: { pathLength: 0 },
        visible: { pathLength: 1 },
    };

    useEffect(() => {
        if (!animate) {
            const timer = setTimeout(() => {
                setKey((prev) => prev + 1);
            }, 3000);

            return () => clearTimeout(timer);
        }
    }, [animate]);

    return (
        <svg key={key} height={height} width={width} className={`${className} ${animate ? "z-[-1] block " :`z-[-2]   ${!first && "hidden"}`}  `}>
            <defs>
                <motion.linearGradient
                    id="gradient1"
                    gradientTransform="rotate(0 0.5 0.5)"
                    animate="visible"
                    variants={gradientVariants}
                >
                    <stop offset="0%" stopColor="hsla(208, 100%, 65%, 1)" />
                    <stop offset="100%" stopColor="hsla(170, 100%, 50%, 1)" />
                </motion.linearGradient>
            </defs>

            {["path-1", "path-2", "path-3"].map((id) => (
                <motion.path
                    key={id}
                    d={pathData}
                    stroke={
                        id === "path-3"
                            ? "hsl(0, 0%, 97%)"
                            : "url(#gradient1)"
                    }
                    strokeWidth={id === "path-3" ? 12 : 1}
                    strokeLinejoin="round"
                    fill="none"
                    className={id === "path-2" ? "blur-sm opacity-40" : ""}
                    variants={pathVariants}
                    initial="hidden"
                    animate={animate ? "visible" : "hidden"}
                    transition={{
                        duration,
                        ease: [0.46, 0.1, 1, 1],
                        delay: id === "path-3" ? duration * 2 : 0,
                    }}
                />
            ))}
        </svg>
    );
};

export default AnimatedGradientLine;