"use client";

import { Link } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { authClient } from "@/lib/auth-client";

export default function Footer() {
	const [isAdmin, setIsAdmin] = useState(false);
	const [isLoading, setIsLoading] = useState(true);

	useEffect(() => {
		authClient.getSession().then((session) => {
			const user = session.data?.user as { role?: string } | undefined;
			setIsAdmin(user?.role === "admin");
			setIsLoading(false);
		});
	}, []);

	return (
		<footer className="relative z-40 flex h-[250px] flex-col items-center justify-center bg-[#d09035]">
			<div className="text-center">
				<h3 className="mb-4 flex items-center justify-center gap-2 font-['Intro',sans-serif] text-2xl text-white">
					<img
						src="/favicon.png"
						alt=""
						className="h-8 w-8 rounded bg-[#0B1C1F]"
					/>
					Kunstenkamp
				</h3>
				<p className="mb-6 font-['Intro',sans-serif] text-white/80">
					Waar creativiteit tot leven komt
				</p>

				<div className="flex flex-col items-center justify-center gap-2 text-sm text-white/70 md:flex-row md:gap-8">
					<a
						href="/privacy"
						className="link-hover transition-colors hover:text-white"
					>
						Privacy Beleid
					</a>
					<span className="hidden text-white/40 md:inline">|</span>
					<a
						href="/terms"
						className="link-hover transition-colors hover:text-white"
					>
						Algemene Voorwaarden
					</a>
					<span className="hidden text-white/40 md:inline">|</span>
					<a
						href="/contact"
						className="link-hover transition-colors hover:text-white"
					>
						Contact
					</a>
					{!isLoading && isAdmin && (
						<>
							<span className="hidden text-white/40 md:inline">|</span>
							<Link
								to="/admin"
								className="link-hover transition-colors hover:text-white"
							>
								Admin
							</Link>
						</>
					)}
				</div>

				<div className="mt-6 text-white/50 text-xs">
					© {new Date().getFullYear()} Kunstenkamp. Alle rechten voorbehouden.
				</div>
				<div className="text-white/50 text-xs transition-colors hover:text-white">
					<a
						href="https://zias.be"
						target="_blank"
						rel="noopener noreferrer"
						className="link-hover"
					>
						Gemaakt met ♥ door zias.be
					</a>
				</div>
			</div>
		</footer>
	);
}
