'use client';

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <html lang="en">
      <body
        style={{
          backgroundColor: '#0f172a',
          color: '#f8fafc',
          fontFamily: 'system-ui, sans-serif',
          margin: 0,
          minHeight: '100vh',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <div style={{ textAlign: 'center', padding: '2rem', maxWidth: '400px' }}>
          <h2 style={{ fontSize: '1.5rem', marginBottom: '1rem' }}>Application Error</h2>
          <p style={{ color: 'rgba(148, 163, 184, 0.85)', marginBottom: '1.5rem' }}>
            A critical error occurred. Please refresh the page.
          </p>
          <button
            onClick={reset}
            style={{
              backgroundColor: '#38bdf8',
              color: '#0f172a',
              border: 'none',
              padding: '0.75rem 1.5rem',
              borderRadius: '0.5rem',
              fontWeight: 600,
              cursor: 'pointer',
              outline: 'none',
              transition: 'background-color 0.2s ease, box-shadow 0.2s ease',
            }}
            onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#7dd3fc')}
            onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = '#38bdf8')}
            onFocus={(e) => (e.currentTarget.style.boxShadow = '0 0 0 3px rgba(56, 189, 248, 0.5)')}
            onBlur={(e) => (e.currentTarget.style.boxShadow = 'none')}
          >
            Refresh Page
          </button>
        </div>
      </body>
    </html>
  );
}
