import { Fragment } from 'react';

import CardContainer from '@design-system/CardContainer';
import Title from '@design-system/Title';
import Divider from '@mui/material/Divider/Divider';
import Stack from '@mui/material/Stack';
import times from 'lodash/times';

import StatItem from './components/StatItem';
import StatItemSkeleton from './components/StatItemSkeleton';
import { type DistributionStatsProps } from './types';

const SKELETON_ITEMS_COUNT = 3;

const DistributionStats = ({
  title,
  stats,
  loading,
  sx,
}: DistributionStatsProps) => {
  return (
    <CardContainer
      fullWidth
      sx={sx}
    >
      <Title
        title={title}
        variant="L"
      />
      <Stack
        component="ul"
        sx={{ m: 0, p: 0 }}
      >
        {loading &&
          times(SKELETON_ITEMS_COUNT, index => (
            <Fragment key={index}>
              <StatItemSkeleton />
              {index < SKELETON_ITEMS_COUNT - 1 && <Divider />}
            </Fragment>
          ))}
        {!loading &&
          stats.map((stat, index) => (
            <Fragment key={stat.type}>
              <StatItem
                type={stat.type}
                title={stat.title}
                value={stat.value}
                differenceIndicator={stat.differenceIndicator}
              />
              {index < stats.length - 1 && <Divider />}
            </Fragment>
          ))}
      </Stack>
    </CardContainer>
  );
};

export default DistributionStats;
