import React from 'react';
import { SText } from '../../common/s-components/typography/s-text';
import { SDistributionPopupHeadline } from '../s-components/s-distribution-popup-headline';
import { SBox } from '../../common/s-components/layout/s-box';
import { SInfoTitle } from '../../common/s-components/s-info-title';
import { SH6 } from '../../common/s-components/typography/s-h6';
import { theme } from '../../app/theme';
import { SRow } from '../../common/s-components/layout/s-row';
import { SH3 } from '../../common/s-components/typography/s-h3';
import { Icon } from '../../common/components/icon';
import { formatStreamDigit } from '../../common/transducers';
import { TCustomRangeEntity, TVendor } from '../../common/types';

type TProps = {
  label: string;
  percent: string;
  range: TCustomRangeEntity;
  total: number;
  vendor: TVendor;
};

export const DistributionPopupHeadline: React.FC<TProps> = props => {
  const { label, percent, range, total, vendor } = props;
  return (
    <SDistributionPopupHeadline>
      <SBox>
        <SInfoTitle capitalize mb={6}>
          {label}
        </SInfoTitle>
        <SH6 color={theme.colors.romanPurple}>{range.standard}</SH6>
      </SBox>
      <SRow>
        <SBox mr={12} mt={4} alignItems="flex-end">
          <SRow mb={4}>
            <SH3 capitalize mr={3} color={theme.colors.black}>
              {percent}
            </SH3>
            <SText sm color={theme.colors.black} mt={4}>
              of total
            </SText>
          </SRow>
          <SText color={theme.colors.black} sm letterSpacing={1} mr={0}>
            {formatStreamDigit(total)}
          </SText>
        </SBox>
        <Icon
          mt={8}
          mr={-1}
          name={vendor}
          size={30}
          color={theme.colors.lavenderGray}
        />
      </SRow>
    </SDistributionPopupHeadline>
  );
};