'use client';

import { useEffect } from 'react';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error('Unhandled error:', error);
  }, [error]);

  return (
    <div className="min-h-screen flex items-center justify-center" style={{ background: 'var(--bg, #0a0b14)' }}>
      <div className="text-center max-w-md px-6">
        <div className="w-16 h-16 rounded-2xl mx-auto mb-6 flex items-center justify-center"
          style={{ background: 'linear-gradient(135deg, #ff914d, #e8712d)' }}>
          <span className="text-white text-2xl font-bold">!</span>
        </div>
        <h2 className="text-xl font-semibold mb-2" style={{ color: 'var(--fg, #e4e4e7)' }}>
          Something went wrong
        </h2>
        <p className="text-sm mb-6" style={{ color: 'var(--mt, #71717a)' }}>
          An unexpected error occurred. Please try again or refresh the page.
        </p>
        <button
          onClick={reset}
          className="px-6 py-2.5 rounded-lg text-white text-sm font-semibold cursor-pointer hover:opacity-90 transition-opacity"
          style={{ background: 'linear-gradient(135deg, #ff914d, #e8712d)' }}
        >
          Try Again
        </button>
      </div>
    </div>
  );
}