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>
  );
}