'use client';

import { useEffect } from 'react';
import * as Sentry from '@sentry/nextjs';
import { ErrorState } from '@/components/ErrorState';
import { useScopedI18n } from '@/i18n/client';
import { normalizeError } from '@/utils/normalizeError';

export type ClientErrorProps = {
    error: Error & { digest?: string };
    reset: () => void;
};

export default function ClientError({ error, reset }: ClientErrorProps) {
    const t = useScopedI18n('pages.profile');

    useEffect(() => {
        Sentry.captureException(error);
        console.error({
            error: normalizeError(error),
            timestamp: new Date().toISOString(),
            context: 'ClientError',
        });
    }, [error]);

    return (
        <ErrorState
            title={t('error.title')}
            message={error.message}
            action={
                <button onClick={() => reset()}>{t('error.action')}</button>
            }
        />
    );
}