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

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

export const CardsSkeleton = () => {
  return (
    <>
      {Array.from({ length: 4 }, (_, index) => (
        <CardContainer
          fullWidth
          key={index}
        >
          <Stack sx={{ flexDirection: 'row', gap: 2, alignItems: 'center' }}>
            <Skeleton
              width={64}
              height={64}
            />
            <Stack sx={{ gap: 0.5, width: '100%' }}>
              <Skeleton
                width="10%"
                height={16}
              />
              <Skeleton
                width="100%"
                height={16}
              />
              <Skeleton
                width="10%"
                height={16}
              />
            </Stack>
            <Skeleton
              width={100}
              height={36}
              sx={{ borderRadius: 2, my: 'auto' }}
            />
          </Stack>
        </CardContainer>
      ))}
    </>
  );
};
