import { memo } from 'react';

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

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

import { ROW_COUNT } from './constants';

const LeaderCollaboratorsSkeleton = () => (
  <Stack sx={{ gap: 1 }}>
    {Array.from({ length: ROW_COUNT }).map((_, i) => (
      // biome-ignore lint/suspicious/noArrayIndexKey: stable skeleton list
      <Stack
        key={i}
        sx={{
          flexDirection: 'row',
          gap: 2,
          alignItems: 'center',
          py: 1,
        }}
      >
        <HuSkeleton
          variant="circular"
          width={40}
          height={40}
        />
        <Stack sx={{ flex: 1, gap: 0.5 }}>
          <HuSkeleton
            variant="rounded"
            width="40%"
            height={14}
          />
          <HuSkeleton
            variant="rounded"
            width="25%"
            height={12}
          />
        </Stack>
        <HuSkeleton
          variant="rounded"
          width={60}
          height={24}
        />
      </Stack>
    ))}
  </Stack>
);

export default memo(LeaderCollaboratorsSkeleton);
