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

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

import { KudosPointsCardContainer } from './container';

export const KudosPointsCardSkeleton = () => (
  <KudosPointsCardContainer>
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 1,
      }}
    >
      <Skeleton
        variant="circular"
        width={48}
        height={48}
      />
      <Skeleton
        width="60%"
        height={40}
      />
    </Stack>
    <Skeleton
      width="100%"
      height={48}
    />
  </KudosPointsCardContainer>
);
