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;
};

const SwitcherSkeleton: FC<PropsWithChildren<Props>> = props => {
  const { children, isLoading } = props;

  if (isLoading) {
    return (
      <Stack sx={{ flexDirection: 'row', gap: 0.5, width: '100%' }}>
        <HuSkeleton
          variant="circular"
          height={40}
          width={40}
        />
        <Stack sx={{ gap: 0.5, width: '100%' }}>
          <HuSkeleton
            isLoading={isLoading}
            width="100%"
            height={24}
          />
          <HuSkeleton
            isLoading={isLoading}
            width={162}
            height={12}
          />
        </Stack>
      </Stack>
    );
  }
  return children as ReactElement;
};

export default SwitcherSkeleton;