import React from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { StatString } from './stat-string';
import {
  getLatestStreamsEntities,
  getChartWeekStreamsEntities,
} from '../transducers';
import { NMarket } from '../../common/types';

type TProps = {
  statistics: NMarket.TMarketStatistics;
};

export const CardStatistics: React.FC<TProps> = props => {
  const { statistics } = props;
  return (
    <SBox height={172} mt={16}>
      <StatString
        variant="dark"
        title="Latest Streams"
        entities={getLatestStreamsEntities(statistics)}
      />
      <StatString
        title="Chart Week Streams"
        entities={getChartWeekStreamsEntities(statistics)}
      />
    </SBox>
  );
};