/**
 * External dependencies
 */
import clsx from 'clsx';

/**
 * WordPress dependencies
 */
import { error, published } from '@wordpress/icons';

/**
 * Internal dependencies
 */
import Icon from '../icon';
import Spinner from '../spinner';

export function ValidityIndicator( {
	id,
	type,
	message,
}: {
	id?: string;
	type: 'validating' | 'valid' | 'invalid';
	message?: string;
} ) {
	const ICON = {
		valid: published,
		invalid: error,
	};
	return (
		<p
			id={ id }
			className={ clsx(
				'components-validated-control__indicator',
				`is-${ type }`
			) }
		>
			{ type === 'validating' ? (
				<Spinner className="components-validated-control__indicator-spinner" />
			) : (
				<Icon
					className="components-validated-control__indicator-icon"
					icon={ ICON[ type ] }
					size={ 16 }
					fill="currentColor"
				/>
			) }
			{ message }
		</p>
	);
}