"use client";

import type React from "react";

import Modal from "../../components/ui/Modal";
import { useModal } from "./ModalContext";
import { MODAL_REGISTRY } from "./ModalRegistery";

const USER_ACTION_MODAL = {
  maxWidth: "max-w-[452px]",
  className: "!p-6 md:!p-10",
  showCloseButton: false,
};

const MODAL_CONFIG = {
  BUY_CREDITS: {
    maxWidth: "max-w-[565px]",
    className: "!p-6 md:!p-10",
    showCloseButton: false,
  },
  THANK_YOU_PAYMENT: {
    maxWidth: "max-w-[488px]",
    className: "!px-6 !py-10 md:!px-10 md:!py-12",
    showCloseButton: false,
  },
  PACKAGE_FORM: {
    maxWidth: "max-w-[565px]",
    className: "!p-6 md:!p-10",
    showCloseButton: true,
  },
  DELETE_USER: USER_ACTION_MODAL,
  DEACTIVATE_USER: USER_ACTION_MODAL,
} as const;

export default function ModalRenderer() {
  const { modal } = useModal();

  if (!modal.type) return null;

  const Component = MODAL_REGISTRY[
    modal.type as keyof typeof MODAL_REGISTRY
  ] as React.ComponentType<any>;

  const config = MODAL_CONFIG[modal.type as keyof typeof MODAL_CONFIG];

  return (
    <Modal
      maxWidth={config?.maxWidth}
      className={config?.className}
      showCloseButton={config?.showCloseButton}
    >
      <Component {...(modal.props as any)} />
    </Modal>
  );
}