import { times } from 'lodash-es';
import Stack from '@material-hu/mui/Stack';

import HuSkeleton from '@material-hu/components/design-system/Skeleton';
import HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';
import HuTableRow from '@material-hu/components/design-system/Table/components/TableRow';

const MemberTableItemSkeleton = () => {
  return (
    <>
      {times(3, i => (
        <HuTableRow key={i}>
          <HuTableCell width="100%">
            <Stack
              sx={{
                flexDirection: 'row',
                gap: 1,
                width: '100%',
                alignItems: 'center',
              }}
            >
              <HuSkeleton
                variant="circular"
                height={40}
                width={40}
              />
              <HuSkeleton
                variant="text"
                height="24px"
                width="80%"
              />
            </Stack>
          </HuTableCell>
          <HuTableCell>
            <HuSkeleton
              variant="text"
              height="34px"
            />
          </HuTableCell>
          <HuTableCell>
            <HuSkeleton
              variant="text"
              height="34px"
            />
          </HuTableCell>
          <HuTableCell>
            <HuSkeleton
              variant="text"
              height="34px"
            />
          </HuTableCell>
          <HuTableCell>
            <HuSkeleton
              variant="text"
              height="34px"
            />
          </HuTableCell>
        </HuTableRow>
      ))}
    </>
  );
};

export default MemberTableItemSkeleton;
