"use client"

import { useEffect } from "react"
import { RefreshCw } from "lucide-react"

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // Log the error to Sentry
    console.error("Global Application Error:", error)
  }, [error])

  return (
    <html>
      <body>
        <div className="min-h-screen flex items-center justify-center bg-background">
          <div className="max-w-md w-full mx-auto p-6">
            <div className="bg-red-50 border border-red-200 rounded-xl p-6 text-center">
              <div className="w-12 h-12 mx-auto mb-4 bg-red-100 rounded-full flex items-center justify-center">
                <RefreshCw className="w-6 h-6 text-red-600" />
              </div>
              <h2 className="text-lg font-semibold text-red-800 mb-2">Application Error</h2>
              <p className="text-red-600 mb-4 text-sm">
                {process.env.NODE_ENV === "development"
                  ? error.message
                  : "A critical error occurred. Please refresh the page."}
              </p>
              {error.digest && (
                <p className="text-xs text-red-500 mb-4">Error ID: {error.digest}</p>
              )}
              <button
                onClick={reset}
                className="w-full bg-red-100 hover:bg-red-200 text-red-800 font-medium py-2 px-4 rounded-lg transition-colors"
              >
                Refresh Page
              </button>
            </div>
          </div>
        </div>
      </body>
    </html>
  )
}
