"use client";
import { useEffect } from "react";

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error("[global error]", error);
  }, [error]);
  return (
    <html>
      <body style={{ background: "#F8FAFC", color: "#e0e0e0", fontFamily: "system-ui", padding: 24, minHeight: "100vh" }}>
        <div style={{ maxWidth: 480, margin: "10vh auto", textAlign: "center" }}>
          <h2 style={{ fontSize: 22, marginBottom: 12 }}>Something went wrong</h2>
          <p style={{ marginBottom: 12, color: "#888" }}>AV Beat hit an unexpected error.</p>
          {error?.digest && (
            <p style={{ fontSize: 12, opacity: 0.5, marginBottom: 16, fontFamily: "monospace" }}>ref: {error.digest}</p>
          )}
          <button
            onClick={() => reset()}
            style={{ padding: "8px 16px", background: "#1D4ED8", color: "white", border: 0, cursor: "pointer", borderRadius: 2 }}
          >
            Try again
          </button>
        </div>
      </body>
    </html>
  );
}
