import React from 'react';
import styled from 'styled-components';
import { Label } from '@bjsdistribution/dms-component-library';
import { useFlagById } from '../order-actions/store';

function DetailSection() {
  const [flagById] = useFlagById();

  let orderColumnData =
    flagById?.order_data?.order_recipient?.recipient_name?.toUpperCase() +
    ', ' +
    flagById?.order_data?.order_recipient?.postcode;

  return (
    <Detail>
      <Flex>
        <StyledLabel label="Reference" />
        <Ref>{flagById?.id}</Ref>
      </Flex>
      <Flex>
        <StyledLabel label="Order" />
        <Order>{orderColumnData}</Order>
      </Flex>
    </Detail>
  );
}

const Detail = styled.div`
  display: flex;
  align-items: center;
  gap: 40%;
  flex-wrap: wrap;
`;

const Flex = styled.div`
  margin-top: 20px;
`;
const Ref = styled.div`
  color: #7b7874;
  font-family: 'Lato', sans-serif;
`;
const Order = styled.div`
  color: #7b7874;
  text-decoration: underline;
  font-family: 'Lato', sans-serif;
`;
const StyledLabel = styled(Label)`
  margin-right: 10px;
  font-weight: bold;
`;

export default DetailSection;
