import styled from 'styled-components';
import React from 'react';
import ContactHome from './ContactHome';
import ContactWork from './ContactWork';
import ContactMobile from './ContactMobile';
import ContactEmail from './ContactEmail';

function ContactDetails() {
  return (
    <Container>
      <GroupedInputs>
        <ContactHome />
        <ContactWork />
      </GroupedInputs>
      <GroupedInputs>
        <ContactMobile />
        <ContactEmail />
      </GroupedInputs>
    </Container>
  );
}

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

const Container = styled.div`
  display: flex;
  flex-direction: column;
  gap: 10px;
`;

export default ContactDetails;
