import { createPortal } from 'react-dom'

export default function LogoutModal({ onConfirm, onCancel }: { onConfirm: () => void; onCancel: () => void }) {
  return createPortal(
    <>
      <div className="fixed inset-0 z-9998 bg-black/40" onClick={onCancel} />
      <div className="fixed inset-x-0 bottom-0 z-9999 rounded-t-2xl bg-white px-5 pb-8 pt-6 shadow-xl">
        <p className="mb-6 text-center font-semibold text-gray-900">می‌خواهید از حساب کاربری خود خارج شوید؟</p>
        <div className="flex gap-3">
          <button
            type="button"
            onClick={onConfirm}
            className="flex-1 rounded-xl bg-[#223D5D] py-3 font-semibold text-white"
          >
            بله
          </button>
          <button
            type="button"
            onClick={onCancel}
            className="flex-1 rounded-xl border border-[#223D5D] py-3 font-semibold text-gray-900"
          >
            خیر
          </button>
        </div>
      </div>
    </>,
    document.body,
  )
}