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

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

const Modal: React.FC<ModalProps> = ({
  title,
  children,
  opened,
  onClose,
  onExited,
}) => {
  const { t } = useLingui();

  return (
    <MantineModal
      opened={opened}
      onClose={onClose}
      title={<Title order={3}>{title}</Title>}
      radius={20}
      transitionProps={{
        transition: "pop",
        duration: 200,
        timingFunction: "ease-out",
        onExited,
      }}
      overlayProps={{ backgroundOpacity: 0.4 }}
      closeButtonProps={{ "aria-label": t`Close` }}
    >
      <Suspense
        fallback={
          <Flex justify="center" align="center" w="100%" h={400}>
            <Loader size="lg" />
          </Flex>
        }
      >
        {children}
      </Suspense>
    </MantineModal>
  );
};

export default Modal;
