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

/**
 * Internal dependencies
 */
import './style.scss';
import Crash from './crash.svg';
import Info from './info.svg';

export type BigMessageProps = {
	readonly className?: string;
	readonly icon?: 'crash' | 'info';
	readonly text?: string;
};

export const BigMessage = ( {
	className,
	icon,
	text,
}: BigMessageProps ): JSX.Element => (
	<div className={ clsx( [ 'nab-big-message', className ] ) }>
		{ 'crash' === icon ? (
			<Crash className="nab-big-message__logo" />
		) : (
			<Info className="nab-big-message__logo" />
		) }
		{ !! text && <p className="nab-big-message__text">{ text }</p> }
	</div>
);