import React from "react";
import {SIM_HIGH_COLOR, SIM_LOW_COLOR, SIM_MID_HIGH_COLOR, SIM_MID_LOW_COLOR} from "../../../../util/colors";
import {LOAD_NAME_MAP} from "../../../../util/simulation-load";

const LoadMetricComponent = ({loadMetric}) => (
    <div>
        <div>Colors represent <strong>{LOAD_NAME_MAP[loadMetric]}</strong></div>
        <div className="btn-group mb-2" style={{display: "flex"}}>
            <span
                className="btn btn-secondary"
                style={{backgroundColor: SIM_LOW_COLOR, flex: 1}}
                title="0-25%"
            />
            <span
                className="btn btn-secondary"
                style={{backgroundColor: SIM_MID_LOW_COLOR, flex: 1}}
                title="25-50%"
            />
            <span
                className="btn btn-secondary"
                style={{backgroundColor: SIM_MID_HIGH_COLOR, flex: 1}}
                title="50-75%"
            />
            <span
                className="btn btn-secondary"
                style={{backgroundColor: SIM_HIGH_COLOR, flex: 1}}
                title="75-100%"
            />
        </div>
    </div>
);

export default LoadMetricComponent;