import { HiddenInputLabel } from './HiddenInputLabel';
import { RadioDot } from './RadioDot';
import { ManualLink } from './ManualLink';

export function RadioOption( {
	name,
	checked,
	onChange,
	title,
	description,
	manualUrl,
	disabled,
} ) {
	return (
		<HiddenInputLabel
			type="radio"
			name={ name }
			checked={ checked }
			disabled={ disabled }
			onChange={ onChange }
			wrapperClassName="py-2"
			labelClassName="flex items-start gap-3"
		>
			<RadioDot checked={ checked } className="mt-0.5" />
			<span>
				<span className="flex items-center gap-2 text-sm font-medium text-gray-900">
					{ title }
					{ manualUrl && <ManualLink href={ manualUrl } /> }
				</span>
				{ description && (
					<span className="mt-0.5 block text-sm text-gray-500">
						{ description }
					</span>
				) }
			</span>
		</HiddenInputLabel>
	);
}