import { NextPageContext } from 'next';

interface ErrorProps {
  statusCode?: number;
}

function Error({ statusCode }: ErrorProps) {
  return (
    <div style={{
      minHeight: '100vh',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      fontFamily: 'system-ui, -apple-system, sans-serif',
      background: 'linear-gradient(180deg, #f8fafc, #f1f5f9)',
      padding: 20,
    }}>
      <h1 style={{ fontSize: 72, margin: 0, color: '#1e293b' }}>
        {statusCode || 'Error'}
      </h1>
      <p style={{ fontSize: 18, color: '#64748b', marginTop: 16 }}>
        {statusCode
          ? `An error ${statusCode} occurred on server`
          : 'An error occurred on client'}
      </p>
      <a
        href="/"
        style={{
          marginTop: 24,
          padding: '12px 24px',
          background: 'linear-gradient(90deg, #2563eb, #7c3aed)',
          color: '#fff',
          borderRadius: 8,
          textDecoration: 'none',
          fontWeight: 500,
        }}
      >
        Go Home
      </a>
    </div>
  );
}

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

export default Error;