import { Grid } from '@mui/material';

import Skeleton from '../../../../design-system/Skeleton';
import SelectionCard from '../../../SelectionCard';

const SelectInstanceDrawerSkeleton = () => {
  return (
    <Grid container>
      {Array.from({ length: 10 }).map((_, index) => (
        <Grid
          item
          xs={12}
          sm={6}
          key={index}
          sx={{ justifyContent: 'center', display: 'flex', my: 1 }}
        >
          <SelectionCard
            onClick={() => {}}
            checked={false}
            sx={{
              width: '95%',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 1,
            }}
          >
            <Skeleton
              variant="rounded"
              height={32}
              width="80%"
              sx={{
                mx: 'auto',
              }}
            />
            <Skeleton
              variant="text"
              height={16}
            />
          </SelectionCard>
        </Grid>
      ))}
    </Grid>
  );
};

export default SelectInstanceDrawerSkeleton;
