import React, {useEffect, useState} from "react";
import CookieConsent from "react-cookie-consent";
import Link from "next/link";

const CookieConsentBanner = ({onConsentChange}: { onConsentChange: (consent: string) => void }) => {
    const [isVisible, setIsVisible] = useState(false);
    const [isFadingIn, setIsFadingIn] = useState(false);

    useEffect(() => {
        const consent = localStorage.getItem("CookieConsent");
        if (!consent) {
            setIsVisible(true);
            setTimeout(() => setIsFadingIn(true), 10); // Delay to trigger CSS transition
        }
    }, []);

    const handleAccept = () => {
        setIsFadingIn(false);
        setTimeout(() => {
            localStorage.setItem("CookieConsent", "accepted");
            setIsVisible(false);
            onConsentChange("accepted");
        }, 500); // Match the duration of the fade-out transition
    };

    const handleDecline = () => {
        setIsFadingIn(false);
        setTimeout(() => {
            localStorage.setItem("CookieConsent", "declined");
            setIsVisible(false);
            onConsentChange("declined");
        }, 500); // Match the duration of the fade-out transition
    };

    if (!isVisible) {
        return null;
    }

    return (
        <CookieConsent
            location="bottom"
            buttonText="Accept All"
            declineButtonText="Decline"
            enableDeclineButton
            cookieName="CookieConsent"
            containerClasses={`${isFadingIn ? 'fade-in' : 'fade-out'}`}
            style={{
                background: "rgba(211,211,211,0.44)",
                color: "#333",
                boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
                padding: "1rem",
                borderRadius: "8px",
                backdropFilter: "blur(10px)",
                margin: "2rem",
                width: "calc(100% - 4rem)",
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                textAlign: "left",
                transition: "opacity 0.5s ease",
                opacity: isFadingIn ? 1 : 0,
            }}
            buttonWrapperClasses="button-wrapper"
            buttonStyle={{
                backgroundColor: "#4CAF50",
                color: "#FFF",
                fontSize: "14px",
                borderRadius: "4px",
                padding: "0.5rem 1rem",
                margin: "0.5rem",
                width: "100%",
                maxWidth: "200px",
            }}
            declineButtonStyle={{
                backgroundColor: "#f44336",
                color: "#FFF",
                fontSize: "14px",
                borderRadius: "4px",
                padding: "0.5rem 1rem",
                margin: "0.5rem",
                width: "100%",
                maxWidth: "200px",
            }}
            expires={90}
            onAccept={handleAccept}
            onDecline={handleDecline}
        >
            <div className="content-wrapper text-xl">
                This website uses cookies to enhance your experience. By using our website, you consent to the use of
                cookies.
                You can read more in our <Link href="/" className="text-blue-800 transition-underline">privacy
                policy</Link>.
            </div>
        </CookieConsent>
    );
};

export default CookieConsentBanner;