import React from 'react';
import styled from 'styled-components';
import { RicherSoundsLogo } from '../../../../assets/icons';
import { displayValueOrNA } from '@bjsdistribution/dms-component-library';
import { useCustomerDetails } from '../../store';

function CollapsedContent() {
  const [CustomerData] = useCustomerDetails();
  const data = CustomerData;

  return (
    <Container>
      <RicherSoundsLogo />
      <Wrapper>
        <CustomerName>{displayValueOrNA(data?.name)}</CustomerName>
        <TradingNameContainer>
          <TradingNameHeader>Trading Name:</TradingNameHeader>
          <TradingName>{displayValueOrNA(data?.account_number)}</TradingName>
        </TradingNameContainer>
      </Wrapper>
    </Container>
  );
}
const Wrapper = styled.div``;

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

const TradingNameContainer = styled.div`
  display: flex;
  gap: 5px;
`;

const TradingName = styled.span`
  color: #6396e5;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
`;

const TradingNameHeader = styled.span`
  color: #aea9a1;
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 145.455% */
`;

const CustomerName = styled.span`
  color: #3a3630;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 24px;
`;

export default CollapsedContent;
