"use client"

import * as Sentry from "@sentry/nextjs"
import { useEffect } from "react"

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

  return (
    <html lang="en">
      <body className="flex min-h-screen flex-col items-center justify-center bg-[#09090b] text-white">
        <h1 className="text-5xl font-bold text-red-500">500</h1>
        <p className="mt-4 text-lg text-white/60">Something went wrong on our end.</p>
        <button
          onClick={reset}
          className="mt-8 rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white hover:bg-indigo-500 transition"
        >
          Try again
        </button>
      </body>
    </html>
  )
}
