import { AlertFilled } from "@ant-design/icons";
import { Tooltip } from "antd";
import React from "react";
// const models = [
//   "equinox",
//   "expedition",
//   "pickup",
//   "tucson",
//   "terrain",
//   "sorento",
//   "sienna",
//   "grandcaravan",
//   "grand caravan",
//   "journey",
//   "nv200",
//   "rav4",
//   //"odyssey",
//   "murano",
//   "edge",
//   "ram",
//   "kicks",
//   "qashqai",
//   "escape",
//   "santa fe",
//   "trax",
//   "armada",
//   "traverse",
//   "telluride",
//   "express",
// ];

export default function VehicleGroupAlertAtom({ job, showGroup = false }) {
  const shouldWarn = false;
  // models.includes(job.v_model.toLowerCase()) && !job.group_verified;

  const vehicleText = `${job.v_model_yr} ${job.v_makedesc} ${job.v_model} (${
    job.v_type
  })${
    showGroup
      ? `- ${job.group} @ ${
          job.v_age === 1 ? `${job.v_age} year` : `${job.v_age} years`
        }`
      : ""
  }
`;

  if (shouldWarn)
    return (
      <Tooltip title="This vehicle might be in the wrong group. Please confirm the group manually and update it if it is incorrect.">
        <div style={{ display: "flex", alignItems: "center" }}>
          <span>{vehicleText}</span>
          <AlertFilled
            style={{ color: "tomato", marginLeft: ".3rem" }}
            className="blink_me"
          />
        </div>
      </Tooltip>
    );

  return vehicleText;
}
