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

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

const GridLayoutSkeleton = () => {
  return (
    <Stack sx={{ gap: 3 }}>
      <Stack sx={{ flexDirection: 'row', gap: 3 }}>
        <HuSkeleton sx={{ flex: 1, height: '56px' }} />
        <HuSkeleton sx={{ width: '80px', height: '56px' }} />
      </Stack>
      <HuSkeleton sx={{ width: '100%', height: '56px' }} />
      <Grid
        container
        spacing={3}
      >
        {Array.from({ length: 6 }, (_, i) => (
          <Grid
            item
            xs={12}
            sm={6}
            md={4}
            key={i}
          >
            <HuSkeleton sx={{ width: '100%', height: '184px' }} />
          </Grid>
        ))}
      </Grid>
    </Stack>
  );
};

export default GridLayoutSkeleton;
