ColorBadgeService.tsx

import { BiCheck } from 'react-icons/bi';


function ColorBadgeService({ year, active, serviceInfo, tickServiceIndex, current }) {

  let tooltip_text = "No additional information available";

  if (serviceInfo !== undefined) {
    const serviceName = serviceInfo['service_name']
    let name = serviceInfo['product_name'];
    let desc = serviceInfo['official_description'];
    let info = serviceInfo['additional_information'];
    if (name != "" || desc != "" || info != "") {
      name = name || "N/A";
      desc = desc || "N/A";
      info = info || "N/A";
      tooltip_text = serviceName + "\n" + name + "\n\n" + "Description: " + desc + "\n" + "Information: " + info;
    }
  }

  let shadow_class = "";

  if (tooltip_text !== "No additional information available") {
    shadow_class = "pill-shadow";
  }

  tooltip_text = `${year}: ${tooltip_text}`;

  return (
    <div className="d-inline-block" key={year}>
      {active && current ? (
        <div
          data-description={tooltip_text}
          className={` bottom-tooltip `}
          style={{ width: "30px", height: "30px", margin: "2px" }}>
          <BiCheck className={`rounded-pill color-of-the-current-service-${tickServiceIndex % 13} bottom-tooltip ${shadow_class}`} />
        </div>
      ) : active && !current ? (
        <div
          data-description={tooltip_text}
          className={` bottom-tooltip `}
          style={{ width: "30px", height: "30px", margin: "2px" }}>
          <BiCheck className={`rounded-pill color-of-the-previous-service-${tickServiceIndex % 13} bottom-tooltip ${shadow_class}`} />
        </div>
      ) : (
        <div
          className={`rounded-pill bg-color-of-the-year-blank`}
          style={{ width: "30px", height: "30px", margin: "2px" }}
        > </div>
      )}
    </div>
  );
}

export default ColorBadgeService;