import { memo } from 'react';

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

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

import UserListSection from '../UserList/UserListSection';

import { CALIBRATION_SKELETON_ROW_COUNT } from './constants';

const CalibrationListSkeleton = () => (
  <UserListSection>
    {Array.from({ length: CALIBRATION_SKELETON_ROW_COUNT }).map((_, i) => (
      <Stack
        key={i}
        component="li"
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 2,
          p: 3,
          width: '100%',
          minWidth: 0,
        }}
      >
        <HuSkeleton
          variant="circular"
          sx={{ width: 40, height: 40, flexShrink: 0 }}
        />
        <HuSkeleton
          variant="rounded"
          sx={{ height: 16, flex: '1 1 160px', maxWidth: 240 }}
        />
        <Stack sx={{ flex: 1 }} />
        <HuSkeleton
          variant="rounded"
          sx={{ width: 140, height: 24, flexShrink: 0, borderRadius: 999 }}
        />
      </Stack>
    ))}
  </UserListSection>
);

export default memo(CalibrationListSkeleton);
