import React from 'react';
import styled from 'styled-components';
import { useOrderDetails } from '../../../store';
import { formatUtcToLocal } from '@bjsdistribution/dms-component-library';

function AllowTracking() {
  const [orderDetails] = useOrderDetails();
  const createdBy = orderDetails?.created_by || 'Unknown';
  const createdAt = orderDetails?.created_at
    ? `${formatUtcToLocal(orderDetails.created_at).date} @ ${
        formatUtcToLocal(orderDetails.created_at).time
      }`
    : 'Not Available';

  return (
    <Container>
      <CreatedBy>
        <Text>Created: </Text> {createdBy}, {createdAt}
      </CreatedBy>
    </Container>
  );
}

const Text = styled.span`
  color: #3a3630;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
`;

const CreatedBy = styled.span`
  color: #6a7378;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
`;

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

export default AllowTracking;
