'use client';

import { useEffect } from 'react';
import Link from 'next/link';
import Header from '@/components/layout/Header';
import Footer from '@/components/layout/Footer';
import Button from '@/components/ui/Button';

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

  return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <main className="flex-1 flex items-center justify-center bg-secondary-gray px-4 py-16">
        <div className="text-center max-w-md mx-auto">
          <div className="text-6xl mb-4">😅</div>
          <h1 className="text-3xl font-semibold text-primary-dark mb-2">
            ¡Ups! Algo salió mal
          </h1>
          <p className="text-lg text-gray-700 mb-6">
            Oops, something went wrong
          </p>
          <p className="text-gray-600 mb-8">
            No fue tu culpa, fue un error de nuestro lado. Prueba de nuevo o vuelve al inicio mientras lo revisamos.
            <br />
            It was not your fault, something broke on our end. Try again or head back home while we take a look.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button onClick={reset} size="lg">
              Intentar de nuevo · Try again
            </Button>
            <Link href="/">
              <Button variant="outline" size="lg" className="w-full sm:w-auto">
                Ir al inicio · Go home
              </Button>
            </Link>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}