'use client';

import { RefreshCcw } from 'lucide-react';

export default function GlobalError({
    error,
    reset,
}: {
    error: Error & { digest?: string };
    reset: () => void;
}) {
    return (
        <html lang="de">
            <body>
                <div className="flex min-h-screen flex-col items-center justify-center p-6 bg-zinc-50 dark:bg-black text-center">
                    <div className="bg-white dark:bg-zinc-900 p-8 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-xl max-w-md w-full space-y-6">
                        <div className="space-y-2">
                            <h2 className="text-2xl font-black text-zinc-900 dark:text-white">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-amber-600 hover:bg-amber-700 text-white rounded-xl font-bold flex items-center justify-center gap-2 transition-all"
                        >
                            <RefreshCcw size={18} />
                            Erneut versuchen
                        </button>
                    </div>
                </div>
            </body>
        </html>
    );
}
