import type { JSX } from 'react';

import { useLazyLoader } from '../../util/use-lazy-loader';

type CreateTemplateModalProps = {
  path: string;
  isOpen: boolean;
  onClose: () => void;
};

export const CreateTemplateModalLazyLoaded = (props: CreateTemplateModalProps): JSX.Element => {
  const CreateTemplateModal = useLazyLoader<CreateTemplateModalProps>(
    'create-template-modal',
    () => import('./CreateTemplateModal').then(mod => ({ default: mod.CreateTemplateModal })),
    props.isOpen,
  );

  return CreateTemplateModal != null ? <CreateTemplateModal {...props} /> : <></>;
};