import { Icon } from '@wordpress/components';
import { caution, check, error, info } from '@wordpress/icons';

type MessageProps = {
	button?: React.ReactNode;
	content: React.ReactNode;
	header: React.ReactNode;
	layout?: 'small' | 'big' | 'custom-content';
	type?: 'default' | 'info' | 'warning' | 'error' | 'success';
	size?: 'mini' | 'tiny' | 'small';
};

const iconByType = {
	default: info,
	info,
	warning: caution,
	error,
	success: check,
};

export default function Message( {
	button = null,
	content,
	header,
	layout = 'small',
	type = 'default',
	size = 'small',
}: MessageProps ) {
	const icon = iconByType[ type ];
	const classAttr = `gs-message gs-message--${ type } gs-message--${ layout } gs-message--${ size }`;

	if ( layout === 'custom-content' ) {
		return (
			<div className={ classAttr }>
				<div className="gs-message__header">
					<Icon icon={ icon } size={ 40 } />
					<span className="gs-message__header-text">{ header }</span>
				</div>
				<div className="gs-message__content">{ content }</div>
				{ button }
			</div>
		);
	}

	return (
		<div className={ classAttr }>
			<Icon icon={ icon } size={ 40 } />
			<div className="gs-message__content">
				<div className="gs-message__header">{ header }</div>
				{ content }
			</div>
			{ button }
		</div>
	);
}