import React from 'react';
import { FormSection } from '@bjsdistribution/dms-component-library';
import styled from 'styled-components';
import Header from '../../common/Header';
import RecipientName from './RecipientName';
import LocationDetails from './location-info';
import ContactDetails from './contact-info';

function CustomerSection() {
  return (
    <CustomFormSection>
      <Header label="Customer" />
      <FormInputs>
        <RecipientName />
        <LocationDetails />
        <ContactDetails />
      </FormInputs>
    </CustomFormSection>
  );
}

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 CustomerSection;
