/**
 * WordPress dependencies
 */
import { Dashicon } from '@safe-wordpress/components';

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

/**
 * Internal dependencies
 */
import './style.scss';

export type ErrorTextProps = {
	readonly className?: string;
	readonly value?: string;
	readonly hasIcon?: boolean;
};

export const ErrorText = ( {
	className,
	value,
	hasIcon = true,
}: ErrorTextProps ): JSX.Element | null => {
	if ( ! value ) {
		return null;
	}

	return (
		<span className={ clsx( 'nab-error-text', className ) }>
			{ !! hasIcon && <Dashicon icon="warning" /> }
			{ value }
		</span>
	);
};