@kentcdodds/package-app-kit

/** @jsxRuntime automatic */
/** @jsxImportSource remix/ui */
import { clientEntry, on, type Handle } from 'remix/ui'
import { DoubleCheckButton } from './double-check-button.tsx'
import { IconTrash2 } from '../icons/trash-2.tsx'

/**
 * Home showcase: DoubleCheckButton that never commits — submit is always prevented.
 */
export const DoubleCheckDemo = clientEntry(
	'kody:app#DoubleCheckDemo',
	function DoubleCheckDemo(_handle: Handle<Record<string, never>>) {
		return () => (
			<form
				method="post"
				action="#"
				class="pak-cluster"
				mix={on('submit', (event) => {
					event.preventDefault()
				})}
			>
				<input type="hidden" name="intent" value="demo-double-check" />
				<DoubleCheckButton
					label="Arm demo"
					confirmLabel="Confirm (no-op)"
					icon={<IconTrash2 size={18} />}
				/>
			</form>
		)
	},
)