import { memo } from 'react';

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

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

const LeaderStatCardsSkeleton = () => (
  <Stack
    sx={{
      flexDirection: 'row',
      gap: 2,
      flexWrap: 'wrap',
    }}
  >
    {[0, 1, 2].map(i => (
      <HuCardContainer
        key={i}
        sx={{ flex: '1 1 240px', p: 3 }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'flex-start',
            gap: 2,
          }}
        >
          <HuSkeleton
            variant="rounded"
            width={40}
            height={40}
          />
          <Stack sx={{ flex: 1, gap: 1 }}>
            <HuSkeleton
              variant="text"
              width="60%"
              height={20}
            />
            <HuSkeleton
              variant="text"
              width="40%"
              height={32}
            />
          </Stack>
        </Stack>
      </HuCardContainer>
    ))}
  </Stack>
);

export default memo(LeaderStatCardsSkeleton);
