"use client";

import * as Sentry from "@sentry/nextjs";
import { Home, RefreshCw } from "lucide-react";
import Link from "next/link";
import { useTranslations } from "next-intl";
import { useEffect } from "react";
import { ErrorScreen } from "@/components/error-screen";

/**
 * Route-segment error boundary. Renders inside the root layout (so the shell
 * stays). Never shows the raw error to the user.
 */
export default function ErrorPage({
	error,
	reset,
}: {
	error: Error & { digest?: string };
	reset: () => void;
}) {
	const t = useTranslations("pages.error");

	useEffect(() => {
		console.error(error);
		Sentry.captureException(error);
	}, [error]);

	return (
		<ErrorScreen
			code={t("code")}
			title={t("title")}
			subtitle={t("subtitle")}
			body={t("body")}
			actions={
				<>
					<button
						type="button"
						className="btn btn-primary"
						onClick={() => reset()}
					>
						<RefreshCw className="error-screen-btn-icon" aria-hidden />
						{t("tryAgain")}
					</button>
					<Link className="btn btn-outline" href="/">
						<Home className="error-screen-btn-icon" aria-hidden />
						{t("backHome")}
					</Link>
				</>
			}
			footer={
				error.digest ? (
					<p className="error-screen-digest">
						{t("reference", { digest: error.digest })}
					</p>
				) : null
			}
		/>
	);
}