'use client';

import { useEffect } from 'react';

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

  return (
    <div className="min-h-screen flex items-center justify-center p-6">
      <div
        className="max-w-md w-full p-8 rounded-xl text-center"
        style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)' }}
      >
        <div
          className="w-14 h-14 rounded-xl flex items-center justify-center mx-auto mb-4"
          style={{ background: 'rgba(255, 110, 110, 0.1)' }}
        >
          <span className="text-2xl">⚠️</span>
        </div>
        <h2 className="text-xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
          Something went wrong
        </h2>
        <p className="text-sm mb-4" style={{ color: 'var(--text-tertiary)' }}>
          {error.message || 'An unexpected error occurred in the dashboard.'}
        </p>
        <pre
          className="text-xs text-left p-3 rounded-lg mb-4 max-h-32 overflow-auto"
          style={{ background: 'var(--surface-muted)', color: 'var(--danger)' }}
        >
          {error.stack?.split('\n').slice(0, 5).join('\n')}
        </pre>
        <button
          onClick={reset}
          className="px-6 py-2.5 rounded-lg text-sm font-medium transition-colors"
          style={{ background: 'var(--accent-primary)', color: 'white' }}
        >
          Try again
        </button>
      </div>
    </div>
  );
}
