import type { ReactNode } from "react";
import { CloseXIcon } from "../dashboard/icons";

export default function ConfirmModal({
  open,
  title,
  description,
  confirmLabel,
  confirmButtonClassName,
  confirmDisabled = false,
  onClose,
  onConfirm,
  width = "440px",
  maxHeight,
  showCloseIcon = false,
  fullWidthButtons = false,
  children,
}: {
  open: boolean;
  title: string;
  description: string;
  confirmLabel: string;
  confirmButtonClassName: string;
  confirmDisabled?: boolean;
  onClose: () => void;
  onConfirm: () => void;
  width?: string;
  maxHeight?: string;
  showCloseIcon?: boolean;
  fullWidthButtons?: boolean;
  children?: ReactNode;
}) {
  if (!open) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4">
      <div
        className="box-border w-full overflow-y-auto rounded-2xl bg-white p-6 shadow-[0_24px_60px_rgba(15,23,42,0.25)]"
        style={{ width, maxWidth: width, maxHeight }}
      >
        <div className="flex items-start justify-between gap-3">
          <h2 className="text-[18px] font-bold text-[#101828]">{title}</h2>
          {showCloseIcon && (
            <button
              type="button"
              onClick={onClose}
              className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[#98A2B3] transition-colors hover:bg-[#F2F4F7] hover:text-[#344054]"
              aria-label="Close"
            >
              <CloseXIcon className="h-3.5 w-3.5" />
            </button>
          )}
        </div>
        <p className="mt-1.5 text-[13px] leading-5 text-[#667085]">{description}</p>

        {children}

        <div className={fullWidthButtons ? "mt-6 flex items-center gap-3" : "mt-6 flex items-center justify-end gap-4"}>
          <button
            type="button"
            onClick={onClose}
            className={
              fullWidthButtons
                ? "h-11 flex-1 rounded-lg bg-[#F2F4F7] text-[13px] font-medium text-[#344054] transition-colors hover:bg-[#E4E7EC]"
                : "text-[13px] font-medium text-[#344054] hover:text-[#101828]"
            }
          >
            Cancel
          </button>
          <button
            type="button"
            onClick={onConfirm}
            disabled={confirmDisabled}
            className={`rounded-lg text-[13px] font-medium text-white transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${
              fullWidthButtons ? "h-11 flex-1" : "px-5 py-2.5"
            } ${confirmButtonClassName}`}
          >
            {confirmLabel}
          </button>
        </div>
      </div>
    </div>
  );
}