"use client";
import React from 'react';
import { PathLineProps } from 'react-svg-pathline';
import { motion } from "framer-motion";

interface AnimatedCustomLineProps extends PathLineProps {
    height: string;
    width: string;
    startIcon?: React.ReactNode;
    endIcon?: React.ReactNode;
    color?: string;
    color2?: string;
    className?: string;
    delay: number
    dasharray?: string;
    duration?: number;
}

const AnimatedCustomLine = ({
    className,
    startIcon,
    endIcon,
    height,
    width,
    points,
    delay,
    color = "hsl(var(--primary))",
    color2 = "hsla(208, 88%, 49%, 1)",
    duration = 2,
}: AnimatedCustomLineProps) => {
    const startPoint = points[0];
    const endPoint = points[points.length - 1];

    const pathData = points
        .map((point, index) =>
            index === 0
                ? `M ${point.x} ${point.y}`
                : `L ${point.x} ${point.y}`
        )
        .join(" ");

    return (
        <svg height={height} width={width} className={`${className}`}>
            <motion.path d={pathData} stroke={color} strokeDasharray={14} strokeWidth="3" fill="none" transition={{ duration, ease: "easeInOut" }}/>
            <motion.path d={pathData} stroke={color2} strokeDasharray="15 200 " strokeWidth="3"
                fill="none"
                initial={{ strokeDashoffset: 0, opacity: 0 }}
                animate={{ strokeDashoffset: [0, "150%", 0], opacity: [0, 1, 1, 1, 0, 1, 1, 1, 0] }}
                transition={{ duration: duration, ease: "linear", repeat: Infinity, repeatDelay: 4, delay }}
            />
            {startIcon && (
                <g transform={`translate(${startPoint.x - 12}, ${startPoint.y - 12})`}>
                    {startIcon}
                </g>
            )}
            {endIcon && (
                <g transform={`translate(${endPoint.x - 12}, ${endPoint.y - 12})`}>
                    {endIcon}
                </g>
            )}
        </svg>
    );
};

export default AnimatedCustomLine;