"use client";
import { Analytics } from "@vercel/analytics/next";
import * as CookieConsent from 'vanilla-cookieconsent';
import 'vanilla-cookieconsent/dist/cookieconsent.css';
import { useEffect, useState } from "react";

export default function CookieBanner() {

    const [analyticsAccepted, setAnalyticsAccepted] = useState(false);

    useEffect(() => {
        document.documentElement.classList.add('cc--elegant-black');

        CookieConsent.run({
            guiOptions: {
                consentModal: { layout: 'box', position: 'bottom right' },
                preferencesModal: {layout: 'box'},
            },
            categories: {
                analytics: {}
            },
            language: {
                default: 'de',
                translations: {
                    de: {
                        consentModal: {
                            title: 'Wir nutzen Cookies',
                            description:
                                'Diese Webseite nutzt optionale Cookies für Statistik und Marketing. Mehr dazu in unserer <a href="/datenschutz" target="_blank" rel="noopener">Datenschutzerklärung</a>.',
                            acceptAllBtn: 'Alle akzeptieren',
                            showPreferencesBtn: 'Einstellungen verwalten',
                        },
                        preferencesModal: {
                            title: 'Cookie-Einstellungen',
                            acceptAllBtn: 'Alle akzeptieren',
                            savePreferencesBtn: 'Auswahl speichern',
                            sections: [
                                { title: "Statistik", linkedCategory: 'analytics' }
                            ],
                        },
                    },
                },
            },
            onConsent: ({ cookie }) => {
                setAnalyticsAccepted(cookie.categories.includes('analytics'));
            },
            onChange: ({ cookie }) => {
                setAnalyticsAccepted(cookie.categories.includes('analytics'))
            }
        })
    }, []);

    if (!analyticsAccepted) return null;
    
    return (
        <>
            <Analytics/>
        </>
    )
}