import { FC } from 'react';

import Grid from '@material-hu/mui/Grid';
import Stack from '@material-hu/mui/Stack';

import HuSkeleton from '@material-hu/components/design-system/Skeleton';

import NewsCardSkeleton from './NewsCardSkeleton';

const SKELETON_CARD_COUNT = 6;

export const TopicChipsSkeleton: FC = () => (
  <Stack
    flexDirection="row"
    sx={{ flexWrap: 'wrap', gap: 1 }}
  >
    {[56, 72, 88, 64, 80].map((width, i) => (
      <HuSkeleton
        key={i}
        height="32px"
        width={`${width}px`}
        sx={{ borderRadius: '16px' }}
      />
    ))}
  </Stack>
);

const NewsListSkeleton: FC = () => (
  <Grid
    container
    spacing={3}
  >
    {Array.from({ length: SKELETON_CARD_COUNT }).map((_, i) => (
      <Grid
        item
        key={i}
        lg={4}
        md={6}
        xs={12}
      >
        <NewsCardSkeleton />
      </Grid>
    ))}
  </Grid>
);

export default NewsListSkeleton;