import { FC, Fragment } from 'react';

import { ulid } from 'ulid';

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

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

const ITEMS_SKELETON_COUNT = 10;
const ConversationsSkeleton: FC = () => {
  const arrayForSkeleton = new Array(ITEMS_SKELETON_COUNT).fill({});

  return (
    <Stack sx={{ gap: 2, px: 2, mt: 3 }}>
      {arrayForSkeleton.map(() => (
        <Fragment key={ulid()}>
          <Stack
            sx={{
              flexDirection: 'row',
              gap: 1,
              justifyContent: 'space-between',
              alignItems: 'center',
            }}
          >
            <HuSkeleton
              height={40}
              variant="circular"
              width={40}
            />
            <Stack sx={{ width: '80%' }}>
              <HuSkeleton variant="rounded" />
              <HuSkeleton variant="text" />
            </Stack>
          </Stack>
          <Divider />
        </Fragment>
      ))}
    </Stack>
  );
};

export default ConversationsSkeleton;
