"use client";

import { useEffect } from "react";
import { RotateCcw, TriangleAlert } from "lucide-react";

/**
 * 错误边界（语言段内）。
 *
 * 必须是客户端组件。捕获渲染期间的运行时错误，
 * 提供重试入口，并把错误上报到控制台便于排查。
 *
 * 注意：`error.message` 在生产环境会被脱敏，因此面向用户只展示通用文案，
 * 详细信息（digest）留给开发者排查。
 */
export default function LocaleError({
	error,
	reset,
}: {
	error: Error & { digest?: string };
	reset: () => void;
}) {
	useEffect(() => {
		console.error("[LocaleError]", error);
	}, [error]);

	return (
		<section className="mx-auto flex min-h-[60vh] w-full max-w-[640px] flex-col items-center justify-center px-lg text-center">
			<span
				aria-hidden="true"
				className="grid size-14 place-items-center rounded-full bg-brand-error/10"
			>
				<TriangleAlert className="size-6 text-brand-error" />
			</span>

			<h1 className="mt-lg text-heading-3 font-semibold text-ink">
				出了点问题
			</h1>

			<p className="mt-sm max-w-[420px] text-body-md text-steel">
				页面加载时发生了意外错误，请稍后重试。如果问题持续出现，请通过「关于」页的联系方式告诉我。
			</p>

			{error.digest ? (
				<p className="mt-sm font-mono text-caption text-muted">
					错误编号：{error.digest}
				</p>
			) : null}

			<button
				type="button"
				onClick={reset}
				className="mt-xxl inline-flex h-10 items-center gap-xs rounded-full bg-primary px-lg text-button-md font-medium text-on-primary transition-colors duration-150 active:bg-charcoal"
			>
				<RotateCcw className="size-4" aria-hidden="true" />
				重试
			</button>
		</section>
	);
}