"use client";

import { useEffect, useState } from "react";

export function CookieConsent() {
	const [isVisible, setIsVisible] = useState(false);

	useEffect(() => {
		const consent = localStorage.getItem("cookie-consent");
		if (!consent) {
			setIsVisible(true);
		}
	}, []);

	const acceptCookies = () => {
		localStorage.setItem("cookie-consent", "accepted");
		setIsVisible(false);
		// Enable analytics tracking
		if (window.plausible) {
			window.plausible("pageview");
		}
	};

	const declineCookies = () => {
		localStorage.setItem("cookie-consent", "declined");
		setIsVisible(false);
	};

	if (!isVisible) return null;

	return (
		<div
			role="dialog"
			aria-label="Cookie toestemming"
			className="fixed right-0 bottom-0 left-0 z-50 border-white/10 border-t bg-[#214e51] p-4 shadow-lg md:p-6"
		>
			<div className="mx-auto flex max-w-6xl flex-col gap-4 md:flex-row md:items-center md:justify-between">
				<div className="flex-1">
					<p className="font-['Intro',sans-serif] text-white">
						<strong>We gebruiken cookies</strong>
					</p>
					<p className="mt-1 text-sm text-white/80">
						We gebruiken analytische cookies om onze website te verbeteren.
						<a href="/privacy" className="underline hover:text-white">
							Meer informatie
						</a>
					</p>
				</div>
				<div className="flex gap-3">
					<button
						type="button"
						onClick={declineCookies}
						className="px-4 py-2 text-sm text-white/80 transition-colors hover:text-white"
					>
						Weigeren
					</button>
					<button
						type="button"
						onClick={acceptCookies}
						className="bg-white px-6 py-2 font-['Intro',sans-serif] text-[#214e51] text-sm transition-all hover:scale-105"
					>
						Accepteren
					</button>
				</div>
			</div>
		</div>
	);
}

// Add to window type
declare global {
	interface Window {
		plausible: (event: string, options?: Record<string, unknown>) => void;
	}
}