import { useState } from 'react'

/**
 * Replaces window.confirm() — shows inline "Are you sure?" buttons on first click.
 * Usage:
 *   <ConfirmButton onConfirm={() => doDelete()} danger label="Delete" confirmLabel="Yes, delete" />
 */
export default function ConfirmButton({
  onConfirm,
  label = 'Delete',
  confirmLabel = 'Confirm',
  cancelLabel = 'Cancel',
  className = 'btn btn-danger btn-sm',
  confirmClassName = 'btn btn-danger btn-sm',
  disabled = false,
  style = {},
}) {
  const [pending, setPending] = useState(false)

  if (pending) {
    return (
      <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}>
        <button
          className={confirmClassName}
          onClick={(e) => { e.stopPropagation(); setPending(false); onConfirm() }}
        >
          {confirmLabel}
        </button>
        <button
          className="btn btn-secondary btn-sm"
          onClick={(e) => { e.stopPropagation(); setPending(false) }}
        >
          {cancelLabel}
        </button>
      </span>
    )
  }

  return (
    <button
      className={className}
      style={style}
      disabled={disabled}
      onClick={(e) => { e.stopPropagation(); setPending(true) }}
    >
      {label}
    </button>
  )
}
