export function TextField( { label, help, value, onChange, placeholder = '', type = 'text', ...rest } ) {
	return (
		<label className="rtgw-field-row">
			{ label && <span className="rtgw-field-row__label">{ label }</span> }
			<input
				type={ type }
				className="rtgw-input"
				value={ value }
				placeholder={ placeholder }
				onChange={ ( e ) => onChange( e.target.value ) }
				{ ...rest }
			/>
			{ help && <span className="rtgw-field-row__help">{ help }</span> }
		</label>
	);
}

export function TextAreaField( { label, help, value, onChange, ...rest } ) {
	return (
		<label className="rtgw-field-row">
			{ label && <span className="rtgw-field-row__label">{ label }</span> }
			<textarea
				className="rtgw-input rtgw-input--textarea"
				value={ value }
				onChange={ ( e ) => onChange( e.target.value ) }
				{ ...rest }
			/>
			{ help && <span className="rtgw-field-row__help">{ help }</span> }
		</label>
	);
}

/** Native <select> row — used for the classic-checkout layout setting. */
export function SelectField( { label, help, value, onChange, options } ) {
	return (
		<label className="rtgw-field-row">
			{ label && <span className="rtgw-field-row__label">{ label }</span> }
			<select
				className="rtgw-input rtgw-input--select"
				value={ value }
				onChange={ ( e ) => onChange( e.target.value ) }
			>
				{ options.map( ( opt ) => (
					<option key={ opt.value } value={ opt.value }>{ opt.label }</option>
				) ) }
			</select>
			{ help && <span className="rtgw-field-row__help">{ help }</span> }
		</label>
	);
}

/**
 * Colour theme picker — a row of named preset swatches plus a native
 * colour input for a fully custom accent. Only the resulting hex value is
 * stored (see includes/class-rtgw-settings.php); everything else (hover
 * shade, soft tint, glow) is derived from it at render time on both the
 * admin preview and the storefront (see src/shared/color.js).
 */
export function ThemeColorField( { label, help, value, onChange, presets } ) {
	return (
		<div className="rtgw-field-row">
			{ label && <span className="rtgw-field-row__label">{ label }</span> }
			<div className="rtgw-theme-swatches">
				{ presets.map( ( preset ) => (
					<button
						key={ preset.key }
						type="button"
						className={ `rtgw-theme-swatch${ value === preset.value ? ' is-selected' : '' }` }
						style={ { '--swatch-color': preset.value } }
						title={ preset.label }
						aria-label={ preset.label }
						onClick={ () => onChange( preset.value ) }
					/>
				) ) }
				<label className="rtgw-theme-swatch rtgw-theme-swatch--custom" style={ { '--swatch-color': value } } title="Custom">
					<input
						type="color"
						value={ value }
						onChange={ ( e ) => onChange( e.target.value ) }
					/>
				</label>
			</div>
			{ help && <span className="rtgw-field-row__help">{ help }</span> }
		</div>
	);
}