"use client";

import { useEffect } from "react";

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <html lang="pt-BR">
      <body
        style={{
          margin: 0,
          minHeight: "100vh",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          gap: 16,
          padding: 24,
          fontFamily: "system-ui, sans-serif",
          background: "#060818",
          color: "#dce3f1",
        }}
      >
        <h1 style={{ margin: 0, fontSize: "1.5rem" }}>Algo deu errado</h1>
        <p style={{ margin: 0, opacity: 0.8, textAlign: "center", maxWidth: 420 }}>
          {error.message || "Erro inesperado ao carregar a página."}
        </p>
        <button
          type="button"
          onClick={() => reset()}
          style={{
            padding: "10px 20px",
            borderRadius: 8,
            border: "none",
            background: "#009bff",
            color: "#fff",
            cursor: "pointer",
            fontWeight: 600,
          }}
        >
          Tentar novamente
        </button>
      </body>
    </html>
  );
}
