import { FormSection } from '@bjsdistribution/dms-component-library';
import React from 'react';
import styled from 'styled-components';
import Header from '../../common/Header';
import ConsignmentNumber from './ConsignmentNumber';
import RecipientReference from './RecipientReference';
import DepotDropdown from './Depot';
import Droptime from './Droptime';
import DeliveryDate from './DeliveryDate';
import Carrier from './Carrier';
import OrderNumber from './OrderNumber';
import ScheduleAfter from './ScheduleAfter';
import VehicleTypeDropdown from './VehicleType';

function OrdersSection() {
  return (
    <CustomFormSection>
      <Header label="Order" />
      <FormInputs>
        <GroupedInputs>
          <ConsignmentNumber />
          <Carrier />
        </GroupedInputs>
        <GroupedInputs>
          <OrderNumber />
          <DepotDropdown />
        </GroupedInputs>
        <GroupedInputs>
          <DeliveryDate />
          <ScheduleAfter />
        </GroupedInputs>
        <GroupedInputs>
          <Droptime />
        </GroupedInputs>
        <GroupedInputs>
          <RecipientReference />
          <VehicleTypeDropdown />
        </GroupedInputs>
      </FormInputs>
    </CustomFormSection>
  );
}

const GroupedInputs = styled.div`
  display: flex;
  gap: 15px;
`;

const FormInputs = styled.div`
  display: flex;
  flex-direction: column;
  gap: 15px;
`;

const CustomFormSection = styled(FormSection)`
  flex: 1;
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
`;

export default OrdersSection;
