import {
	createRootRoute,
	Link,
	Outlet,
	useMatchRoute,
} from "@tanstack/react-router";
import { FileText, ListChecks, Settings, Users } from "lucide-react";

export const Route = createRootRoute({
	component: () => {
		const matchRoute = useMatchRoute();
		const isOnboarding = matchRoute({ to: "/onboarding" });

		return (
			<div className="flex min-h-screen flex-col bg-background text-foreground">
				<main className="mx-auto w-full max-w-2xl flex-1 px-4 pb-20 pt-6">
					<Outlet />
				</main>
				{!isOnboarding && (
					<nav className="fixed inset-x-0 bottom-0 border-t bg-background">
						<div className="mx-auto flex max-w-2xl">
							<Link
								to="/prozess"
								className="flex flex-1 flex-col items-center gap-1 py-2 text-xs text-muted-foreground [&.active]:font-bold [&.active]:text-primary"
							>
								<ListChecks className="size-5" />
								Fortschritt
							</Link>
							<Link
								to="/kontakte"
								className="flex flex-1 flex-col items-center gap-1 py-2 text-xs text-muted-foreground [&.active]:font-bold [&.active]:text-primary"
							>
								<Users className="size-5" />
								Kontakte
							</Link>
							<Link
								to="/antrag"
								className="flex flex-1 flex-col items-center gap-1 py-2 text-xs text-muted-foreground [&.active]:font-bold [&.active]:text-primary"
							>
								<FileText className="size-5" />
								Antrag
							</Link>
							<Link
								to="/einstellungen"
								className="flex flex-1 flex-col items-center gap-1 py-2 text-xs text-muted-foreground [&.active]:font-bold [&.active]:text-primary"
							>
								<Settings className="size-5" />
								Mehr
							</Link>
						</div>
					</nav>
				)}
			</div>
		);
	},
});