import { type FC } from 'react';

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

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

const KeyUpdateListItemSkeleton: FC = () => (
  <Stack
    direction="row"
    spacing={2}
    sx={{ px: 2, py: 1.5, alignItems: 'center' }}
  >
    <HuSkeleton
      variant="circular"
      width={40}
      height={40}
    />
    <Stack sx={{ flex: 1, gap: 0.75 }}>
      <HuSkeleton
        variant="rounded"
        width="80%"
        height={14}
      />
      <HuSkeleton
        variant="rounded"
        width="50%"
        height={12}
      />
    </Stack>
  </Stack>
);

export default KeyUpdateListItemSkeleton;