import { FC } from 'react';

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

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

const DEFAULT_CARDS = 3;

export const UsersSkeleton: FC = () => {
  return (
    <Stack sx={{ gap: 3 }}>
      {Array.from({ length: DEFAULT_CARDS }, (_, i) => (
        <Stack
          key={i}
          sx={{ gap: 1, alignItems: 'center', flexDirection: 'row' }}
        >
          <HuSkeleton
            height={40}
            width={40}
            variant="circular"
          />
          <HuSkeleton
            width={284}
            height={24}
          />
        </Stack>
      ))}
    </Stack>
  );
};

export default UsersSkeleton;