'use client';

import { RefreshCcw } from 'lucide-react';
import * as Sentry from "@sentry/nextjs";
import { useEffect } from "react";

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

    return (
        <html lang="de">
            <body>
                <div className="flex min-h-screen flex-col items-center justify-center p-6 bg-black text-center">
                    <div className="bg-zinc-900 p-8 rounded-[32px] border border-zinc-800 shadow-xl max-w-md w-full space-y-6">
                        <div className="space-y-2">
                            <h2 className="text-2xl font-bold text-white uppercase tracking-tighter">Kritischer Fehler</h2>
                            <p className="text-zinc-500 text-sm">
                                Ein schwerwiegender Fehler ist aufgetreten. Bitte versuche die Seite neu zu laden.
                            </p>
                        </div>

                        <button
                            onClick={() => reset()}
                            className="w-full py-4 bg-orange-600 hover:bg-orange-700 text-white rounded-2xl font-bold flex items-center justify-center gap-2 transition-all shadow-lg shadow-orange-950/20"
                        >
                            <RefreshCcw size={18} />
                            Erneut versuchen
                        </button>
                    </div>
                </div>
            </body>
        </html>
    );
}
