"use client";

import { cn } from "@/utlis";
import {
  Modal,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalFooter,
  ModalProps,
} from "@heroui/react";
import { ReactNode } from "react";

interface BaseModalProps extends ModalProps {
  isOpen: boolean;
  onOpenChange?: (isOpen: boolean) => void;
  title?: string;
  children: ReactNode;
  footer?: ReactNode;
  contentClassName?: string;
  headerClassName?: string;
  bodyClassName?: string;
  footerClassName?: string;
  dis?: string;
}

export const BaseModal: React.FC<BaseModalProps> = ({
  isOpen,
  onOpenChange,
  title,
  children,
  footer,
  contentClassName,
  headerClassName,
  disableAnimation,
  bodyClassName,
  dis,
  footerClassName,
  ...rest
}) => {
  return (
    <>
      {isOpen && <div className="fixed inset-0 bg-black/50 z-40"></div>}

      <Modal
        isOpen={isOpen}
        onOpenChange={onOpenChange}
        hideCloseButton
        scrollBehavior="inside"
        classNames={{
          base: "max-h-[90vh] my-4",
          wrapper: "items-start  overflow-y-auto",
        }}
        className="relative z-100"
        {...rest}
      >
        <ModalContent
          className={cn(
            "bg-white max-h-[90vh] overflow-y-auto",
            contentClassName,
          )}
        >
          {(onClose) => (
            <>
              {title ? (
                <>
                  <ModalHeader
                    className={cn(
                      "flex flex-col gap-1 text-primary",
                      headerClassName,
                    )}
                  >
                    {title}
                    {dis && (
                      <p className="text-sm text-gray-500 font-normal">{dis}</p>
                    )}
                  </ModalHeader>
                </>
              ) : null}

              <ModalBody className={cn(bodyClassName)}>{children}</ModalBody>
              {footer ? (
                <ModalFooter className={cn(footerClassName)}>
                  {footer}
                </ModalFooter>
              ) : null}
            </>
          )}
        </ModalContent>
      </Modal>
    </>
  );
};