import React, { type ErrorInfo, type FC, type ReactNode } from 'react';
import { ErrorSuspenseBoundary as _ErrorSuspenseBoundary } from '@wener/reaction';
import { LoadingIndicator } from '../../loader';
import { NonIdealPage } from '../../pages';

export const ErrorSuspenseBoundary: FC<{
	fallback?: ReactNode;
	children: ReactNode;
	title?: ReactNode;
	onError?: (e: { error: Error; errorInfo: ErrorInfo }) => void;
}> = ({
	title,
	fallback = <LoadingIndicator />,
	onError = ({ error, errorInfo }) => {
		console.error(`[ErrorSuspenseBoundary]`, errorInfo, error);
	},
	children,
}) => {
	return (
		<_ErrorSuspenseBoundary
			fallback={fallback}
			renderError={(props) => <NonIdealPage.PageError error={props.error} onReset={props.reset} title={title} />}
			onError={onError}
		>
			{children}
		</_ErrorSuspenseBoundary>
	);
};