/**
 * External Dependencies
 */
import { __, sprintf } from '@wordpress/i18n';

/**
 * Internal Dependencies
 */
import { clsx } from '@admin/utils';

export function Field( { label, optional, error, hint, className, children } ) {
	const displayLabel = optional
		? sprintf(
				/* translators: %s: field label. */
				__( '%s — optional', 'advanced-ads' ),
				label
		  )
		: label;

	return (
		// eslint-disable-next-line jsx-a11y/label-has-associated-control -- children is always the field's own input/select/textarea, wrapped for implicit association; the rule can't see through the opaque children prop.
		<label
			className={ clsx( 'flex flex-col gap-1.5 text-[13px]', className ) }
		>
			<span className="font-semibold">{ displayLabel }</span>
			{ children }
			{ error && (
				<span className="text-[12.5px] text-red-700">{ error }</span>
			) }
			{ hint && <span className="text-xs text-gray-500">{ hint }</span> }
		</label>
	);
}