"use client";

import { useEffect } from "react";

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error);
  }, [error]);

  return (
    <div style={{ 
      fontFamily: 'system-ui, sans-serif', 
      display: 'flex', 
      alignItems: 'center', 
      justifyContent: 'center', 
      minHeight: '60vh', 
      margin: 0, 
      backgroundColor: '#f9fafb' 
    }}>
      <div style={{ textAlign: 'center', padding: '2rem' }}>
        <h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', color: '#111827', marginBottom: '1rem' }}>
          Une erreur est survenue
        </h2>
        <p style={{ color: '#6b7280', marginBottom: '1.5rem' }}>
          Nous nous excusons pour la gêne occasionnée.
        </p>
        <button
          onClick={() => reset()}
          style={{
            backgroundColor: '#f97316',
            color: 'white',
            border: 'none',
            padding: '0.75rem 1.5rem',
            borderRadius: '0.375rem',
            fontWeight: '600',
            cursor: 'pointer',
            fontSize: '0.875rem',
          }}
        >
          Réessayer
        </button>
      </div>
    </div>
  );
}