import { useId } from '@wordpress/element';
import { clsx } from '@admin/utils';

// A visually-hidden native checkbox/radio input paired with a clickable
// <label>, wired together via a generated id. The input carries no visible
// layout (sr-only), so callers render their own visual indicator (checkbox
// square, radio dot, ...) and text as children of the label.
export function HiddenInputLabel( {
	type,
	name,
	checked,
	onChange,
	disabled,
	wrapperClassName,
	labelClassName,
	children,
} ) {
	const id = useId();

	return (
		<div className={ clsx( wrapperClassName, disabled && 'opacity-50' ) }>
			<input
				id={ id }
				name={ name }
				type={ type }
				className="sr-only"
				checked={ !! checked }
				disabled={ disabled }
				onChange={ onChange }
			/>
			<label
				htmlFor={ id }
				className={ clsx(
					labelClassName,
					disabled ? 'cursor-not-allowed' : 'cursor-pointer'
				) }
			>
				{ children }
			</label>
		</div>
	);
}