import { Card } from "antd";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import DataLabel from "../data-label/data-label.component";

export default function ContractCourtesyCarBlock({ courtesyCar }) {
  const { t } = useTranslation();
  return (
    <Link to={`/manage/courtesycars/${courtesyCar && courtesyCar.id}`}>
      <Card className="ant-card-grid-hoverable" style={{ height: "100%" }} title={t("courtesycars.labels.courtesycar")}>
        <div>
          <DataLabel label={t("courtesycars.fields.fleetnumber")}>
            {(courtesyCar && courtesyCar.fleetnumber) || ""}
          </DataLabel>
          <DataLabel label={t("courtesycars.fields.plate")}>{(courtesyCar && courtesyCar.plate) || ""}</DataLabel>
          <DataLabel label={t("courtesycars.labels.vehicle")}>
            {`${(courtesyCar && courtesyCar.year) || ""} ${
              (courtesyCar && courtesyCar.make) || ""
            } ${(courtesyCar && courtesyCar.model) || ""}`}
          </DataLabel>
        </div>
      </Card>
    </Link>
  );
}
