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

export default function ContractJobBlock({ job }) {
  const { t } = useTranslation();
  return (
    <Link to={`/manage/jobs/${job && job.id}`}>
      <Card className="ant-card-grid-hoverable" style={{ height: "100%" }} title={t("jobs.labels.job")}>
        <div>
          <DataLabel label={t("jobs.fields.ro_number")}>{(job && job.ro_number) || ""}</DataLabel>
          <DataLabel label={t("jobs.fields.vehicle")}>
            {`${(job && job.v_model_yr) || ""} ${(job && job.v_make_desc) || ""} ${(job && job.v_model_desc) || ""}`}
          </DataLabel>
          <DataLabel label={t("jobs.fields.owner")}>
            <OwnerNameDisplay ownerObject={job} />
          </DataLabel>
        </div>
      </Card>
    </Link>
  );
}
