import React from "react";
import { useTranslation } from "react-i18next";
import CardTemplate from "./job-detail-cards.template.component";

export default function JobDetailCardsVehicleComponent({ loading, data }) {
  const { t } = useTranslation();

  return (
    <CardTemplate
      loading={loading}
      title={t("jobs.labels.cards.vehicle")}
      extraLink={data.vehicle ? `/manage/vehicles/${data.vehicle.id}` : null}
    >
      {data ? (
        <span>
          {` ${data.vehicle?.v_model_yr || t("general.labels.na")} ${
            data.vehicle?.v_make_desc || t("general.labels.na")
          } ${data.vehicle?.v_model_desc || t("general.labels.na")}`}
        </span>
      ) : null}
    </CardTemplate>
  );
}