'use client';

import React, { useEffect } from 'react';

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

  return (
    <div className="min-h-screen bg-slate-50 flex items-center justify-center p-6 text-center font-sans antialiased">
      <div className="bg-white p-8 sm:p-10 rounded-2xl border border-slate-200/90 shadow-sm max-w-md w-full space-y-4">
        <div className="w-12 h-12 rounded-2xl bg-rose-50 border border-rose-200 text-rose-600 flex items-center justify-center mx-auto text-lg">
          <i className="fa-solid fa-triangle-exclamation" />
        </div>
        <h2 className="text-xl font-bold text-slate-900 tracking-tight">Application Error</h2>
        <p className="text-xs text-slate-500 font-mono bg-slate-50 border border-slate-200/80 p-3 rounded-xl text-left overflow-x-auto leading-relaxed">
          {error.message || 'An unexpected application error occurred.'}
        </p>
        <div className="pt-2">
          <button
            onClick={() => reset()}
            className="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl font-semibold text-xs bg-slate-900 text-white hover:bg-slate-800 shadow-sm transition-all cursor-pointer"
          >
            <i className="fa-solid fa-arrows-rotate text-xs" />
            <span>Try Again</span>
          </button>
        </div>
      </div>
    </div>
  );
}