/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';

/**
 * Internal dependencies
 */
import type { BlockErrorProps } from './types';
const BlockError = ( {
	imageUrl = `${ WC_BLOCKS_IMAGE_URL }/block-error.svg`,
	header = __( 'Oops!', 'woo-gutenberg-products-block' ),
	text = __(
		'There was an error loading the content.',
		'woo-gutenberg-products-block'
	),
	errorMessage,
	errorMessagePrefix = __( 'Error:', 'woo-gutenberg-products-block' ),
	button,
	showErrorBlock = true,
}: BlockErrorProps ): React.ReactNode => {
	return showErrorBlock ? (
		<div className="wc-block-error wc-block-components-error">
			{ imageUrl && (
				<img
					className="wc-block-error__image wc-block-components-error__image"
					src={ imageUrl }
					alt=""
				/>
			) }
			<div className="wc-block-error__content wc-block-components-error__content">
				{ header && (
					<p className="wc-block-error__header wc-block-components-error__header">
						{ header }
					</p>
				) }
				{ text && (
					<p className="wc-block-error__text wc-block-components-error__text">
						{ text }
					</p>
				) }
				{ errorMessage && (
					<p className="wc-block-error__message wc-block-components-error__message">
						{ errorMessagePrefix ? errorMessagePrefix + ' ' : '' }
						{ errorMessage }
					</p>
				) }
				{ button && (
					<p className="wc-block-error__button wc-block-components-error__button">
						{ button }
					</p>
				) }
			</div>
		</div>
	) : null;
};

export default BlockError;