import { clsx } from '@admin/utils';

export function RadioDot( { checked, className } ) {
	return (
		<span
			aria-hidden="true"
			className={ clsx(
				'inline-flex size-[18px] shrink-0 items-center justify-center rounded-full border',
				checked ? 'border-primary' : 'border-gray-400',
				className
			) }
		>
			{ checked && <span className="size-2.5 rounded-full bg-primary" /> }
		</span>
	);
}