import './arrow.css';
import {IArrow} from "../../interfaces/arrow/IArrow.ts";
import {ReactNode} from "react";


export default function Arrow(props: IArrow) {

    const renderLineBlock = () => {
        const blockArray: ReactNode[] = [];
        const size:number = parseInt(((props.width - 20) / 20).toFixed(0));
        for(let i = 0; i < size; i++) {
            blockArray.push(<div className="arrow-line-block" style={{backgroundColor: props.color}}></div>)
        }
        return blockArray;
    }

    return (
        <div className="arrow" style={{width: props.width}}>
            <div className="arrow-line">{renderLineBlock()}</div>
            <div className="arrow-head" style={{borderLeftColor: props.color}}></div>
        </div>
    )
}