// Modal.tsx
import React from "react";
import { Modal as BootstrapModal } from "react-bootstrap";
import classNames from "classnames"; // optional: for cleaner class merging

interface CustomModalProps {
  show: boolean;
  header: boolean;
  centered: boolean;
  classname: string;
  fullscreen?: true | "sm" | "md" | "lg" | "xl" | "xxl" | "xm";
  onHide: () => void;
  title?: string;
  children: React.ReactNode;
  position?: "left" | "right" | "center" | "top";
  backdrop?: boolean | "static";
  keyboard?: boolean;
}

const Modal: React.FC<CustomModalProps> = ({
  show,
  header,
  fullscreen = true,
  centered = false,
  classname = "",
  onHide,
  title = "Modal",
  children,
  position = "center",
  backdrop = true,
  keyboard = true,
}) => {
  const positionClass =
    position === "left"
      ? "left-slide-modal"
      : position === "right"
      ? "right-slide-modal"
      : position === "top"
      ? "top-slide-modal"
      : "";

  return (
    <>
      <style>
        {`
            .custom-rounded-modal .modal-content {
              border-radius: 1.5rem; /* Adjust as needed */
              overflow: hidden;
            }
          `}
      </style>
      <BootstrapModal
        show={show}
        fullscreen={fullscreen}
        onHide={onHide}
        centered={centered}
        dialogClassName={classNames(
          classname,
          positionClass,
          "custom-rounded-modal"
        )}
        id="menu-main"
        data-menu-width="280"
        data-menu-active="nav-pages"
        animation={true}
        backdrop={backdrop}
        keyboard={keyboard}
      >
        {header && (
          <BootstrapModal.Header closeButton>
            <BootstrapModal.Title className="font-700">{title}</BootstrapModal.Title>
          </BootstrapModal.Header>
        )}
        <BootstrapModal.Body className="p-0">{children}</BootstrapModal.Body>
      </BootstrapModal>
    </>
  );
};

export default Modal;