import Skeleton from '@design-system/Skeleton';
import Stack from '@mui/material/Stack';

const StatItemSkeleton = () => {
  return (
    <Stack
      component="li"
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        py: 2,
      }}
    >
      <Skeleton
        variant="circular"
        width={16}
        height={16}
      />
      <Skeleton
        width={80}
        height={20}
        sx={{ ml: 0.5 }}
      />
      <Skeleton
        width={40}
        height={28}
        sx={{ marginLeft: 'auto' }}
      />
    </Stack>
  );
};

export default StatItemSkeleton;
