import { getRouteApi } from "@tanstack/react-router";
import type { NavigationLink, NavigationSection } from "@/lib/cms";
import Section from "./Section";

const rootApi = getRouteApi("__root__");

export default function Footer() {
	const { footer } = rootApi.useLoaderData();
	const sections: NavigationSection[] = footer?.sections ?? [];
	const tagline = footer?.tagline?.trim();

	return (
		<footer className="bg-neutral-accent">
			<Section>
				<div className="flex flex-row flex-wrap gap-12 w-full pb-8">
					{sections.map((group, gi) => (
						<div key={group.id ?? gi}>
							{group.title && <h3 className="mb-2">{group.title}</h3>}
							<div className="flex flex-col">
								{(group.entries ?? []).map((item: NavigationLink, i) => (
									<a key={item.id ?? `${item.to}-${i}`} href={item.to}>
										{item.label}
									</a>
								))}
							</div>
						</div>
					))}
					{tagline && (
						<div className="ml-auto mr-0 self-end">
							<div className="flex flex-col">
								<p>{tagline}</p>
							</div>
						</div>
					)}
				</div>
			</Section>
		</footer>
	);
}
