import React from 'react';
import { Card } from './ui/Card';
import { isRouteErrorResponse, useRouteError } from 'react-router-dom';

export function ErrorBoundary() {
  const error = useRouteError();
  console.error(error);

  return (
    <div className="min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-3xl mx-auto">
        <Card>
          <div className="p-6 text-center">
            <h2 className="text-2xl font-bold text-red-600 mb-4">
              Ocorreu um erro
            </h2>
            
            <div className="mt-4 p-4 bg-red-50 rounded-lg text-left">
              {isRouteErrorResponse(error) ? (
                <div>
                  <p><strong>Status:</strong> {error.status}</p>
                  <p><strong>Mensagem:</strong> {error.data.message || error.statusText}</p>
                </div>
              ) : error instanceof Error ? (
                <div>
                  <p><strong>Erro:</strong> {error.message}</p>
                  {error.stack && (
                    <details className="mt-2">
                      <summary className="cursor-pointer text-sm">Ver detalhes técnicos</summary>
                      <pre className="mt-2 whitespace-pre-wrap text-xs">
                        {error.stack}
                      </pre>
                    </details>
                  )}
                </div>
              ) : (
                <p>Ocorreu um erro desconhecido.</p>
              )}
            </div>
            
            <div className="mt-6">
              <a
                href="/"
                className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
              >
                Voltar para a página inicial
              </a>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
}