import { Flex, Loader, Modal as MantineModal, Title } from "@mantine/core";
import { PropsWithChildren, Suspense } from "react";

interface ModalProps extends PropsWithChildren {
  title?: string;
  opened: boolean;
  onClose: () => void;
}

const Modal: React.FC<ModalProps> = ({ title, children, opened, onClose }) => (
  <MantineModal
    opened={opened}
    onClose={onClose}
    title={<Title order={3}>{title}</Title>}
  >
    <Suspense
      fallback={
        <Flex justify="center" align="center" w="100%" h={400}>
          <Loader size="lg" />
        </Flex>
      }
    >
      {children}
    </Suspense>
  </MantineModal>
);

export default Modal;
