"use client";

import Link from "next/link";
import { useEffect } from "react";

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

  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-stone-50 px-6 text-center">
      <div
        className="mb-6 flex h-16 w-16 items-center justify-center rounded-2xl"
        style={{ backgroundColor: "#1c3d36" }}
      >
        <svg className="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
        </svg>
      </div>
      <h1 className="text-2xl font-bold" style={{ color: "#000d0a" }}>Something went wrong</h1>
      <p className="mt-2 max-w-sm text-sm" style={{ color: "#6b7280" }}>
        {error.message || "An unexpected error occurred. The backend may be unavailable."}
      </p>
      <div className="mt-6 flex gap-3">
        <button
          onClick={reset}
          className="rounded-lg px-5 py-2.5 text-sm font-semibold text-white transition hover:opacity-90"
          style={{ backgroundColor: "#007359" }}
        >
          Try again
        </button>
        <Link
          href="/"
          className="rounded-lg border px-5 py-2.5 text-sm font-medium transition hover:bg-stone-100"
          style={{ borderColor: "#e3e0e3", color: "#374151" }}
        >
          Go home
        </Link>
      </div>
    </div>
  );
}