import React from 'react';
import { PathLine, PathLineProps } from 'react-svg-pathline';

interface IntegrationLineProps extends PathLineProps {
    height: string;
    width: string;
    startIcon?: React.ReactNode;
    endIcon?: React.ReactNode;
    color?: string,
    className?: string
    dasharray?: string
}

const IntegrationLine = ({ className, startIcon, endIcon, height, width, dasharray, points, r = 10, color = "hsl(var(--primary))" }: IntegrationLineProps) => {
    const startPoint = points[0];
    const endPoint = points[points.length - 1];

    return (
        <svg height={height} width={width} className={` ${className}`}>
            <PathLine points={points} stroke={color} strokeDasharray={dasharray} strokeWidth="3" className="  opacity-100 duration-700" fill="none" r={r}
            />
            <PathLine points={points} stroke={"hsla(208, 88%, 49%, 1)"} strokeDasharray={"14 190"} strokeWidth="3" className="  moving-dash   opacity-40 duration-700 " fill="none" r={r} />
            {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 IntegrationLine;