import { FC, PropsWithChildren, ReactElement } from 'react';

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

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

type Props = {
  isLoading: boolean;
  multiline?: boolean;
};

const InputSkeleton: FC<PropsWithChildren<Props>> = props => {
  const { children, isLoading, multiline = false } = props;

  if (isLoading) {
    return (
      <Stack sx={{ gap: 1 }}>
        <HuSkeleton
          isLoading={isLoading}
          width="21%"
          height={22}
        />
        <HuSkeleton
          isLoading={isLoading}
          width="100%"
          height={multiline ? 170 : 56}
        />
      </Stack>
    );
  }
  return children as ReactElement;
};

export default InputSkeleton;