'use no memo'; // generated cache cost outweighs reuse in these shallow renderers

import type { ReactNode } from 'react';

import { ErrorBoundary as ScionErrorBoundary } from '@oomfware/scion';

import { m } from '#/paraglide/messages';

import * as css from './ErrorBoundary.css';
import { ErrorScreen } from './ErrorScreen';

interface Props {
	children?: ReactNode;
	renderError?: (error: unknown) => ReactNode;
}

export function ErrorBoundary({ children, renderError }: Props) {
	const fallback = (error: unknown) => {
		if (renderError) {
			return renderError(error);
		}

		return (
			<div className={css.fill}>
				<TranslatedErrorScreen details={String(error)} />
			</div>
		);
	};

	return <ScionErrorBoundary fallback={fallback}>{children}</ScionErrorBoundary>;
}

function TranslatedErrorScreen({ details }: { details?: string }) {
	return (
		<ErrorScreen
			title={m['common.error.ohNo']()}
			message={m['common.error.unexpected']()}
			details={details}
		/>
	);
}