"use client"

import type { JSX } from "react"
import { useEffect } from "react"
import { AlertTriangle } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import { useTranslations } from "next-intl"

/**
 * P3-1: 学生报告卡路由错误边界。
 */
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}): JSX.Element {
  const t = useTranslations("grades")
  useEffect(() => {
    console.error("[ReportCard] Route error:", error)
  }, [error])

  return (
    <div className="flex h-full flex-col items-center justify-center gap-4 p-12">
      <AlertTriangle className="h-10 w-10 text-destructive" aria-hidden="true" />
      <div className="text-center">
        <h2 className="text-lg font-semibold">{t("reportCard.errorTitle")}</h2>
        <p className="mt-1 text-sm text-muted-foreground">
          {t("reportCard.errorDescription")}
        </p>
      </div>
      <Button onClick={reset} variant="outline">
        {t("reportCard.retry")}
      </Button>
    </div>
  )
}
