import { SyncOutlined } from "@ant-design/icons";
import { Button, Card, Col, PageHeader, Row, Space } from "antd";
import React from "react";
import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
import ScheduleModal from "../schedule-job-modal/schedule-job-modal.container";
import ScheduleProductionList from "../schedule-production-list/schedule-production-list.component";

export default function ScheduleCalendarComponent({ data, refetch }) {
  return (
    <Row gutter={[16, 16]}>
      <ScheduleModal />

      <Col span={24}>
        <PageHeader
          extra={
            <Space wrap>
              <Button
                onClick={() => {
                  refetch();
                }}
              >
                <SyncOutlined />
              </Button>

              <ScheduleProductionList />
            </Space>
          }
        />
      </Col>

      <Col span={24}>
        <Card>
          <ScheduleCalendarWrapperComponent
            data={data}
            refetch={refetch}
            style={{ height: "100rem" }}
          />
        </Card>
      </Col>
    </Row>
  );
}