'use client';

import { useEffect } from 'react';
import * as Sentry from '@sentry/nextjs';
import { Rubik } from 'next/font/google';
import { getBackdropStyle } from '@/utils/getBackdropStyle';
import { normalizeError } from '@/utils/normalizeError';

const font = Rubik({ subsets: ['latin'] });

export default function GlobalError({
    error,
    reset,
}: {
    error: Error & { digest?: string };
    reset: () => void;
}) {
    useEffect(() => {
        // Log the error to an error reporting service
        Sentry.captureException(error);

        console.error({
            error: normalizeError(new Error('Test error')),
            timestamp: new Date().toISOString(),
            context: 'GlobalError',
        });
    }, [error]);

    const backdropStyle = getBackdropStyle();

    return (
        <html>
            <body className={font.className} style={backdropStyle}>
                <div className="flex h-screen flex-col items-center justify-center">
                    <div className="flex flex-col gap-5 p-5 content-column">
                        <h4>Something went wrong!</h4>
                        <button onClick={() => reset()}>Try again</button>
                    </div>
                </div>
            </body>
        </html>
    );
}
