import { FormSection } from '@bjsdistribution/dms-component-library';
import React from 'react';
import styled from 'styled-components';
import Header from '../../common/Header';
import OrderStatusNote from './OrderStatusNote';
import DeliveryInstructions from './DeliveryInstructions';
import OtherInstructions from './OtherInstructions';

function InstructionSection() {
  return (
    <CustomFormSection>
      <Header label="Instructions / Notes" />
      <FormInputs>
        <OrderStatusNote />
        <DeliveryInstructions />
        <OtherInstructions />
      </FormInputs>
    </CustomFormSection>
  );
}
const FormInputs = styled.div`
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
`;

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

export default InstructionSection;
