import React from 'react';
import { SRow } from '../../common/s-components/layout/s-row';
import { theme } from '../../app/theme';
import { StatColumn } from './stat-column';
import { SStatContainer } from '../s-components/s-stat-container';
import { SStatHeading } from '../s-components/s-stat-heading';
import { TStatisticsData } from '../types';

type TProps = {
  title: string;
  variant?: string;
  entities: TStatisticsData[];
};

export const StatString: React.FC<TProps> = props => {
  const { entities, variant, title } = props;
  const bg =
    variant === 'dark'
      ? theme.colors.pickledBluewood
      : theme.colors.transparent;

  return (
    <SStatContainer bg={bg}>
      <SStatHeading medium>{title}</SStatHeading>
      <SRow>
        {entities.map((entity, index) => {
          return (
            <StatColumn
              index={index}
              key={`${entity.data.id}-${title}`}
              data={entity.data}
            />
          );
        })}
      </SRow>
    </SStatContainer>
  );
};

StatString.defaultProps = {
  variant: 'light',
};