import React from "react";
import {FallbackProps} from "react-error-boundary";
import {Button, Notice} from "@wordpress/components";
import {__} from "@wordpress/i18n";

const ErrorFallback = ({error, resetErrorBoundary}: FallbackProps) => {
	const err = error instanceof Error ? error : new Error(String(error));

	return (
		<Notice
			status={"error"}
			isDismissible={false}
			className={"error-boundary"}
		>
			<p>
				{__(
					"Something went wrong:",
					"product-description-in-loop-for-woocommerce",
				)}
			</p>
			<pre>{err.message}</pre>
			<Button
				type={"button"}
				variant={"primary"}
				onClick={resetErrorBoundary}
			>
				{__("Try again", "product-description-in-loop-for-woocommerce")}
			</Button>
		</Notice>
	);
};

export default ErrorFallback;
