import { useDispatch } from "react-redux";

import { useTheme } from "@hooks/useTheme";
import { ScreenTab, setScreenTab } from "@store/globalSlice";
import { getBorderRadius } from "@utils/getBorderRadius";
import { useErrorBoundary } from "react-error-boundary";
import { Button } from "./Button";
import { WarningSign } from "./WarningSign";

export const ErrorBoundaryFallback = () => {
	const dispatch = useDispatch();
	const theme = useTheme();
	const { resetBoundary } = useErrorBoundary();

	const { width, borderRadius } = theme;

	function backToHome() {
		dispatch(setScreenTab(ScreenTab.HOME));
		resetBoundary();
	}

	return (
		<div
			className="bn-bg-layer-1 bn-p-6 bn-w-full bn-h-full bn-flex bn-flex-col bn-items-center"
			// biome-ignore format:
			style={{ width: `${width}px`, borderRadius: getBorderRadius(borderRadius) }}
		>
			<WarningSign />
			<p className="bn-text-primary bn-font-medium bn-text-lg bn-text-center">
				Something went wrong
			</p>
			<p className="bn-text-secondary bn-font-normal bn-text-sm bn-mb-6 bn-text-center">
				Our team has been alerted and is working on a fix. You can refresh the page, or
				click the button below to return to the home screen.
			</p>
			<Button label="Back to Home" onClick={backToHome} />
		</div>
	);
};
