import React from 'react';
import styled from 'styled-components';
import { useCustomerInfo } from '../../store';

const Details = () => {
  // const [orderDetails] = useOrderDetails();
  const [customerInfo] = useCustomerInfo();
  const recipient = customerInfo?.recipient_name || '';
  const postcodeShow = customerInfo?.postcode || '';

  return (
    <DetailsContainer>
      <Typo>
        CUSTOMER RETURN - {recipient} , {postcodeShow}
      </Typo>
    </DetailsContainer>
  );
};

const DetailsContainer = styled.div`
  display: flex;
  align-items: center;
  gap: 10px;
  > svg {
    transform: scale(0.6);
  }
`;

const Typo = styled.div`
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px; /* 160% */
  text-transform: uppercase;
  margin: 0;
  padding: 0;

  @media screen and (max-width: 1220px) {
    font-size: 14px;
  }
`;

export default Details;
