import React from 'react';
import styled from 'styled-components';
import Address from './Address';
import Postcode from './Postcode';
import Latitude from './Latitude';
import Longitude from './Longitude';
import What3words from './What3words';

function LocationDetails() {
  return (
    <Container>
      <Address />
      <Right>
        <RightColumn>
          <Postcode />
          <What3words />
        </RightColumn>
        <RightColumn>
          <Latitude />
          <Longitude />
        </RightColumn>
      </Right>
    </Container>
  );
}

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

const Right = styled.div`
  display: flex;
  gap: 10px;
`;

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

export default LocationDetails;
