'use client';

import { useEffect } from 'react';

interface ErrorPageProps {
  error: Error & { digest?: string };
  unstable_retry: () => void;
}

// 원본 메시지·스택은 화면에 내지 않는다 — 개발자 진단용으로만 콘솔에 남기고(프로덕션에서는
// Next.js가 Server Component 에러를 이미 digest 포함 일반화 메시지로 치환해 전달한다),
// 사용자에게는 일반화된 문구 + 재시도만 제공한다. Next.js 16.2 문서 권고에 따라 세그먼트
// 재조회까지 수행하는 `unstable_retry()`를 `reset()` 대신 사용한다(admins/error.tsx와 동일).
export default function ErrorPage({ error, unstable_retry }: ErrorPageProps) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <section className="flex flex-1 flex-col items-center justify-center gap-2 p-8">
      <h1 className="text-lg text-foreground">문제가 발생했습니다.</h1>
      <p className="text-sm text-foreground/60">잠시 후 다시 시도해 주세요.</p>
      <button
        type="button"
        onClick={() => unstable_retry()}
        className="mt-4 bg-foreground px-4 py-2 text-background"
      >
        다시 시도
      </button>
    </section>
  );
}