import React from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SRow } from '../../common/s-components/layout/s-row';
import { SH3 } from '../../common/s-components/typography/s-h3';
import { SH6 } from '../../common/s-components/typography/s-h6';
import { Icon } from '../../common/components/icon';
import { theme } from '../../app/theme';
import { STotalBox } from '../s-components/s-total-box';
import { SkeletonTotalBox } from './skeleton-total-box';
import { NMarket } from '../../common/types';

type TProps = {
  header: NMarket.TMarketHeader;
};

export const CardHeader: React.FC<TProps> = props => {
  const { header } = props;

  return (
    <SBox height={34} mt={15}>
      <SRow justifyContent="space-between">
        <SRow>
          <SBox ml={16} mt={5}>
            <SH3>{header.marketName}</SH3>
          </SBox>
          <SBox ml={8} mt={9}>
            <Icon name="next" size={13} color="white" />
          </SBox>
        </SRow>

        {header.entityStreamsTotal.loading ? (
          <SkeletonTotalBox />
        ) : (
          <STotalBox>
            <SRow justifyContent="space-between" flexWrap="nowrap">
              <SBox>
                <SH6 mt={4} mr={10} ml={2} color={theme.colors.periwinkleGray}>
                  ALL TIME
                </SH6>
              </SBox>
              <SBox>
                <SH3 mr={1} mt={0.5} medium letterSpacing={1}>
                  {header.allTime || 'N/A'}
                </SH3>
              </SBox>
            </SRow>
          </STotalBox>
        )}
      </SRow>
    </SBox>
  );
};