import cls from "./index.module.css";

function BlueRect(props) {
  const title = props.title || "DEFAULT";
  const value = props.value || "0℃";
  return (
    <div
      className={`${cls.blueRect} ${cls[title]}`}
      style={{
        background: props.blue ? "#0a4268ee" : "#0a426860",
      }}
    >
      <span
        className="title"
        style={{
          fontSize: "18px",
          lineHeight: "24px",
          color: props.blue ? "#40afb8" : "#fff",
          fontWeight: 600,
          userSelect: "none",
        }}
      >
        {title}
      </span>
      <span className="value" style={{ userSelect: "none", fontSize: "22px" }}>
        {value}
      </span>
    </div>
  );
}

export default BlueRect;