import { Suspense } from 'react';

import { ModalTypes } from '@/components/modal/constants/ModalTypes';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import { useModalContext } from '@/context/ModalContext';

export const ModalLoadingFallback = () => (
  <div className='fixed inset-0 z-[100000] flex animate-fade-in items-center justify-center bg-black/60 animate-duration-700'>
    <div className='flex h-[50vh] w-[300px] items-center justify-center gap-2 rounded-lg p-4'>
      <SpinnerSVG className='h-6 w-6' />
      <span className='text-foreground-primary'>Loading...</span>
    </div>
  </div>
);

// Extracted props from lazy loaded component to enforce type safety
type ComponentProps<T> =
  T extends React.LazyExoticComponent<React.ComponentType<infer P>> ? P : never;

const LazyLoadedModal = <
  T extends React.LazyExoticComponent<React.ComponentType<any>>,
>({
  modalType,
  Component,
  isOpen,
  ...componentProps
}: {
  modalType: ModalTypes;
  Component: T;
  isOpen?: boolean;
} & ComponentProps<T>) => {
  const { isModalOpen } = useModalContext();
  if (!isModalOpen(modalType) && !isOpen) return null;

  return (
    <Suspense fallback={<ModalLoadingFallback />}>
      <Component {...componentProps} />
    </Suspense>
  );
};

export default LazyLoadedModal;