'use client'

import { Loader2 } from 'lucide-react'

/**
 * 删除对话确认弹框（居中 modal）。
 * deleting=true 时禁用关闭/确认，显示「删除中」。onClose 的防误触守卫由调用方传入。
 */
export function H5DeleteModal({
  deleting,
  error,
  onConfirm,
  onClose,
}: {
  deleting: boolean
  error: string | null
  onConfirm: () => void
  onClose: () => void
}): React.JSX.Element {
  return (
    <div className="h5-modal-overlay" onClick={onClose}>
      <div
        className="h5-modal"
        role="alertdialog"
        aria-label="删除对话确认"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="h5-modal-title">删除对话</div>
        <div className="h5-modal-desc">确认删除该对话？删除后无法恢复。</div>
        {error ? <div className="h5-modal-error">{error}</div> : null}
        <div className="h5-modal-actions">
          <button type="button" className="h5-modal-btn" onClick={onClose} disabled={deleting}>
            取消
          </button>
          <button
            type="button"
            className="h5-modal-btn danger"
            onClick={onConfirm}
            disabled={deleting}
          >
            {deleting ? <Loader2 size={14} className="h5-spin" /> : null}
            {deleting ? '删除中' : '删除'}
          </button>
        </div>
      </div>
    </div>
  )
}