"use client";

import { useEffect } from "react";
import { AlertTriangle, RefreshCw } from "lucide-react";

export default function ErrorBoundary({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error("Entropyk Web Error Boundary caught:", error);
  }, [error]);

  return (
    <div className="flex h-screen w-screen flex-col items-center justify-center bg-[var(--canvas-bg,#f8fafc)] p-6 text-center">
      <div className="flex h-14 w-14 items-center justify-center rounded-full bg-amber-100 text-amber-600 mb-4">
        <AlertTriangle size={28} />
      </div>
      <h2 className="mono text-lg font-bold text-[var(--ink,#0f172a)]">
        Une erreur est survenue dans l&apos;interface
      </h2>
      <p className="mt-1 max-w-md text-xs text-[var(--ink-dim,#475569)]">
        {error.message || "Une erreur inattendue s'est produite lors du rendu des composants."}
      </p>
      <button
        onClick={() => reset()}
        className="mt-5 flex items-center gap-2 rounded bg-[var(--accent,#4f46e5)] px-4 py-2 text-xs font-semibold text-white shadow hover:opacity-90 active:scale-95"
      >
        <RefreshCw size={14} /> Réessayer
      </button>
    </div>
  );
}
