import React from "react";
import "./TrafficLights.scss";
import { Props } from "./TrafficLights.types";
import {
  addClassNames,
  addClassNameWithModifiers
} from "../../helpers/components";

export const TrafficLights = (props: Props) => {
  const { label, position, className, style, score } = props;

  const parseScoreClass = () => {
    let value;
    if (score <= 2) {
      value = "normal";
    } else if (score <= 4) {
      value = "deviation";
    } else {
      value = "critical";
    }
    return `app-traffic-lights__value_${value}`;
  };

  return (
    <div
      className={addClassNames(
        className || "",
        addClassNameWithModifiers("app-traffic-lights", position)
      )}
      style={style}
    >
      <span className={`app-traffic-lights__value ${parseScoreClass()}`} />
      <span className="app-traffic-lights__label">{label}</span>
    </div>
  );
};

export default TrafficLights;