import { Col, Row, Typography } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import JobsCreateVehicleInfoNewComponent from "./jobs-create-vehicle-info.new.component";
import JobsCreateVehicleInfoSearchComponent from "./jobs-create-vehicle-info.search.component";

const colSpan = {
  sm: { span: 24 },
  lg: { span: 12 },
};

export default function JobsCreateVehicleInfoComponent({ loading, vehicles }) {
  const { t } = useTranslation();
  return (
    <div>
      <Typography.Title>{t("jobs.labels.create.vehicleinfo")}</Typography.Title>
      <Row gutter={[32, 32]}>
        <Col {...colSpan}>
          <JobsCreateVehicleInfoSearchComponent
            loading={loading}
            vehicles={vehicles}
          />
        </Col>
        <Col {...colSpan}>
          <JobsCreateVehicleInfoNewComponent />
        </Col>
      </Row>
    </div>
  );
}