import { type FC } from 'react';
import dynamic from 'next/dynamic';

import type { ModalProps } from '~/src/components/Modal';

interface LazyModalProps extends Pick<ModalProps, 'onClose'> {
  /**
   * Triggers import
   */
  isOpen: boolean;
}

export default <Props,>(loader) => {
  const LazyComponent = dynamic(() => loader(), { ssr: false });

  const LazyModal: FC<Props & LazyModalProps> = (
    { isOpen, onClose, ...props } /* @ts-expect-error Type mismatch */
  ) => (isOpen ? <LazyComponent {...props} onClose={onClose} /> : null);

  return LazyModal;
};