import {
  Label,
  displayValueOrNA,
} from '@bjsdistribution/dms-component-library';
import React from 'react';
import styled from 'styled-components';
import CopyText from '../../../../../common/copy/CopyText';
import { useOrderDetails } from '../../../store';

function ConsignmentNumber() {
  const [orderDetails] = useOrderDetails();
  return (
    <Container>
      <Wrapper>
        <Label label="Consignment Number" />
        <CopyText text={displayValueOrNA(orderDetails.consignment)} />
      </Wrapper>
      <Consignment>{displayValueOrNA(orderDetails.consignment)}</Consignment>
    </Container>
  );
}

const Wrapper = styled.div`
  display: flex;
  align-items: center;
  gap: 5px;
`;

const Consignment = styled.span`
  color: #249e45;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
`;

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

export default ConsignmentNumber;
