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

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

}

const CustomLine = ({className, startIcon, endIcon, strokeWidth = "3", height, width,dasharray, points, r = 10, color = "hsl(var(--primary))" }: CustomLineProps) => {
    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={strokeWidth}
                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 CustomLine;