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

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

export default function JobsCreateOwnerInfoComponent({ loading, owners }) {
  const { t } = useTranslation();
  return (
    <div>
      <Row>
        <Typography.Title>{t("jobs.labels.create.ownerinfo")}</Typography.Title>
      </Row>
      <Row gutter={[32, 32]}>
        <Col {...colSpan}>
          <JobsCreateOwnerInfoSearchComponent
            loading={loading}
            owners={owners}
          />
        </Col>

        <Col {...colSpan}>
          <JobsCreateOwnerInfoNewComponent />
        </Col>
      </Row>
    </div>
  );
}