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