import Skeleton from '@design-system/Skeleton';
import Stack from '@mui/material/Stack';

const FormSectionSkeleton = () => {
  return (
    <Stack sx={{ gap: 4, opacity: 0.5 }}>
      <Stack sx={{ gap: 1 }}>
        <Skeleton
          height={32}
          width="200px"
        />
        <Skeleton
          height={24}
          width="400px"
        />
      </Stack>
      <Stack sx={{ gap: 2 }}>
        <Skeleton
          height={100}
          width="100%"
        />
        <Skeleton
          height={100}
          width="100%"
        />
        <Skeleton
          height={100}
          width="100%"
        />
        <Skeleton
          height={100}
          width="100%"
        />
      </Stack>
    </Stack>
  );
};

export default FormSectionSkeleton;
