MAD-Platform/app/error.tsx

'use client';

import { useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';

interface ErrorProps {
  error: Error & { digest?: string };
  reset: () => void;
}

export default function Error({ error, reset }: ErrorProps) {
  useEffect(() => {
    // Log l'erreur dans la console/terminal
    console.error('Erreur serveur:', error);
  }, [error]);

  return (
    <div className="min-h-screen flex items-center justify-center bg-cwhite px-4 py-8">
      <div className="text-center w-full max-w-md mx-auto">
        {/* Logo */}
        <div className="flex justify-center mb-6 md:mb-8">
          <Image
            src="/logo.svg"
            alt="MAD Logo"
            width={100}
            height={100}
            className="w-20 h-20 md:w-[120px] md:h-[120px]"
          />
        </div>

        {/* 500 Content */}
        <div className="max-w-md mx-auto">
          <h1 className="text-7xl md:text-9xl font-bold text-lorange mb-3 md:mb-4">500</h1>
          <h2 className="text-2xl md:text-3xl font-semibold text-gray-900 mb-3 md:mb-4">
            Erreur serveur
          </h2>
          <p className="text-sm md:text-base text-gray-600 mb-2 px-2">
            Une erreur inattendue s'est produite sur le serveur.
          </p>
          {error.message && (
            <p className="text-xs md:text-sm text-gray-500 mb-6 md:mb-8 font-mono bg-gray-100 p-2 md:p-3 rounded-lg break-all text-left mt-3">
              {error.message}
            </p>
          )}
          {!error.message && (
            <p className="text-sm md:text-base text-gray-600 mb-6 md:mb-8 px-2">
              Veuillez réessayer dans quelques instants.
            </p>
          )}

          {/* Action Buttons */}
          <div className="flex flex-col gap-3 md:gap-4 justify-center">
            <button
              onClick={reset}
              className="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg text-sm font-medium text-white bg-lorange hover:bg-dorange focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lorange transition-colors w-full md:w-auto"
            >
              Réessayer
            </button>
            <Link
              href="/dashboard"
              className="inline-flex items-center justify-center px-6 py-3 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lorange transition-colors w-full md:w-auto"
            >
              Retour au tableau de bord
            </Link>
          </div>
        </div>

        {/* Footer */}
        <div className="mt-8 md:mt-12 text-center text-xs text-gray-500 px-4">
          © {new Date().getFullYear()} MAD - <a href="https://legouix.dev" target="_blank" rel="noopener noreferrer" className="text-lblue hover:text-dblue">Propulsé par LGX</a>
        </div>
      </div>
    </div>
  );
}