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

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

const SkeletonSummaryCards = () => (
  <HuCardContainer fullWidth>
    <Stack
      sx={{
        gap: 1,
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'start',
        alignItems: 'center',
      }}
    >
      <HuSkeleton
        width={60}
        height={60}
        variant="circular"
      />
      <Stack
        sx={{
          justifyContent: 'center',
          alignItems: 'start',
          width: '100%',
        }}
      >
        <HuSkeleton
          variant="text"
          height={24}
          sx={{ width: '100%' }}
        />
        <HuSkeleton
          variant="text"
          width={160}
          height={12}
        />
      </Stack>
    </Stack>
  </HuCardContainer>
);

export default SkeletonSummaryCards;
