import { PropsWithChildren, ReactElement } from 'react';

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

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

type Props = {
  isLoading: boolean;
};

const TerminalSiteSkeleton = ({
  isLoading,
  children,
}: PropsWithChildren<Props>) => {
  if (isLoading) {
    return (
      <Stack sx={{ gap: 0.5, width: '100%' }}>
        <Skeleton
          isLoading={isLoading}
          width="18%"
          height={22}
        />
        <Skeleton
          isLoading={isLoading}
          width="65%"
          height={20}
        />
      </Stack>
    );
  }
  return children as ReactElement;
};

export default TerminalSiteSkeleton;