import { NextPageContext } from 'next';
import Layout from '@/components/Layout';

interface ErrorPageProps {
  statusCode: number;
}

function ErrorPage({ statusCode }: ErrorPageProps) {
  const title = statusCode === 404 ? 'Page Not Found' : 'Server Error';
  const message =
    statusCode === 404
      ? '요청하신 페이지를 찾을 수 없습니다.'
      : '서버에서 오류가 발생했습니다. 잠시 후 다시 시도해주세요.';

  return (
    <Layout title={`${statusCode} - Stock Oracle`}>
      <div className="flex flex-col items-center justify-center min-h-[60vh] text-center">
        <h1 className="text-6xl font-bold text-gray-300 mb-4">{statusCode}</h1>
        <h2 className="text-2xl font-semibold text-gray-900 mb-2">{title}</h2>
        <p className="text-gray-600 mb-8">{message}</p>
        <a
          href="/"
          className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
        >
          홈으로 돌아가기
        </a>
      </div>
    </Layout>
  );
}

ErrorPage.getInitialProps = ({ res, err }: NextPageContext) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode ?? 500 : 404;
  return { statusCode };
};

export default ErrorPage;