import { FC } from 'react';

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

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

const ListSkeleton: FC = () => {
  return (
    <Stack sx={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {Array.from({ length: 3 }).map((_, index) => (
        <Stack
          key={index}
          sx={{ flexDirection: 'row', gap: 2, width: '100%', p: 2 }}
        >
          <HuSkeleton
            variant="circular"
            height="36px"
            width="36px"
          />
          <Stack sx={{ flex: 1, gap: 1 }}>
            <HuSkeleton
              variant="rounded"
              height="20px"
              width="100%"
            />
            <HuSkeleton
              variant="text"
              height="20px"
              width="100%"
            />
          </Stack>
        </Stack>
      ))}
    </Stack>
  );
};

export default ListSkeleton;
