import { memo } from 'react';

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

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

const LeaderProgressBlockSkeleton = () => (
  <Stack sx={{ gap: 1.5 }}>
    <HuSkeleton
      variant="rounded"
      width="40%"
      height={20}
    />
    <HuSkeleton
      variant="rounded"
      width="100%"
      height={16}
    />
    <Stack sx={{ flexDirection: 'row', gap: 2, flexWrap: 'wrap' }}>
      {[0, 1, 2].map(i => (
        <HuSkeleton
          key={i}
          variant="rounded"
          width={100}
          height={14}
        />
      ))}
    </Stack>
  </Stack>
);

export default memo(LeaderProgressBlockSkeleton);
