"use client";
import React from "react";

type ConfirmModalProps = {
  isOpen: boolean;
  title?: string;
  message: string;
  cancelText: string;
  confirmText: string;
  headingText: string;
  onConfirm: () => void;
  onCancel: () => void;
};

export default function ConfirmExitModal({
  isOpen,
  title = "Are you sure?",
  message,
  onConfirm,
  onCancel,
  cancelText,
  confirmText,
  headingText,
}: ConfirmModalProps) {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-100 flex items-center justify-center bg-gray-100/80 backdrop-blur-[8px]">
      <div className="w-[90%] max-w-md border-1 bg-gray-100 p-10 text-center">
        <h4 className="med">{headingText}</h4>
        <h1 className="med">{title}</h1>
        <div className="flex flex-col items-center justify-center py-4">
          <p className="mb-4 text-gray-700">{message}</p>
        </div>
        <div className="flex flex-col items-center justify-center gap-8 align-middle">
          <button onClick={onCancel} className="btn-outline">
            {cancelText}
          </button>
          <button onClick={onConfirm} className="btn-link">
            {confirmText}
          </button>
        </div>
      </div>
    </div>
  );
}