import React from 'react';

const Label = (props) => {
    let label;
    if (props.score < 0.1) label = "Disaster";
    else if (props.score <= 0.3) label = "Insufficient";
    else if (props.score <= 0.5) label = "Sufficient";
    else if (props.score <= 0.6) label = "Avarage";
    else if (props.score <= 0.8) label = "Good";
    else if (props.score <= 0.9) label = "Very good";
    else label = "Excellent";

    return <p>{label}</p>;
};

const Star = (props) => {
    if (props.on) {
        return <i className="fas fa-star"/>;
    } else {
        return <i className="far fa-star"/>;
    }
}

const Rater = (props) => {
    const raterStyle = {
        textAlign: "center",
        padding: "2em",
        borderRadius: 2,
        backgroundColor: "#E2E2E2",
        filter: "drop-shadow(0px 0px 5px #666)",
        margin: "2em",
        width: "fit-content"
    };

    const stars = [];
    for (let i = 1; i <= props.max; i ++) {
        const on = i <= props.rating;
        stars.push(<Star on={on}/>);
    }

    return <div style={raterStyle}>
        <Label score={props.rating/props.max}/>
        {stars}
    </div>
}

const ExerciseTwo = (props) => {
    const raterStyle = {
        display: "flex"
    }

    return <div style={raterStyle}>
        <Rater rating={7} max={8}/>
        <Rater rating={1} max={5}/>
        <Rater rating={3} max={3}/>
    </div>
}

export {ExerciseTwo};
