import React from 'react';

const Label = (props) => {
    const style = {
        fontFamily: "Verdana",
        fontSize: 25,
        fontWeight: "bold"
    }
    return <text x="180" y="25" fill={props.color} style={style}>
        {props.percentage} %
    </text>
}

const Bar = (props) => {
    const d = "M20 55 l" + (props.percentage / 100) * 360 + " 0";
    return (
        <g fill="none" stroke={props.color} strokeWidth="25">
            <path strokeLinecap="round" d={d} />
        </g>
    )
}

const ProgressBar = (props) => {

    return <svg height="80" width="400">
        <Bar color="lightgrey" percentage="100"/>
        <Bar color={props.color} percentage={props.percentage}/>

        <Label color={props.color} percentage={props.percentage}/>
    </svg>;
}

const ExerciseThree = (props) => {
    return <div>
        <ProgressBar percentage="75" color="#ce4b99" />
        <ProgressBar percentage="15" color="#ce1b29" />
        <ProgressBar percentage="65" color="#125b69" />
    </div>
}

export {ExerciseThree};
