import { useState, type ReactNode } from 'react'

/**
 * Two-step confirm for destructive form submits (progressive enhancement).
 * SSR / no-JS: `type="submit"` so the parent form POSTs normally.
 * With JS: first click arms (preventDefault); second click submits; blur resets.
 */
export function DoubleCheckButton({
	label = 'Delete',
	confirmLabel = 'Are you sure?',
	className = 'pak-btn pak-btn-danger',
	icon,
}: {
	label?: string
	confirmLabel?: string
	className?: string
	icon?: ReactNode
}) {
	const [armed, setArmed] = useState(false)
	return (
		<button
			type="submit"
			className={className}
			data-double-check
			data-armed={armed ? 'true' : 'false'}
			aria-pressed={armed ? 'true' : 'false'}
			onClick={(event) => {
				if (!armed) {
					event.preventDefault()
					setArmed(true)
				}
			}}
			onBlur={() => {
				if (armed) setArmed(false)
			}}
		>
			{armed ? (
				confirmLabel
			) : (
				<span className="pak-cluster pak-gap-2">
					{icon}
					{label}
				</span>
			)}
		</button>
	)
}