"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { LayoutDashboard, Layers, ListTodo, Search } from "lucide-react";
import { cn } from "@/lib/utils";

const ITEMS = [
  { label: "Start", href: "/dashboard", icon: LayoutDashboard },
  { label: "Völker", href: "/colonies", icon: Layers },
  { label: "Aufgaben", href: "/tasks", icon: ListTodo },
  { label: "Suche", href: "/search", icon: Search },
];

export function BottomNav() {
  const pathname = usePathname();

  return (
    <nav className="fixed inset-x-0 bottom-0 z-30 flex border-t bg-background sm:hidden">
      {ITEMS.map((item) => {
        const Icon = item.icon;
        const isActive = pathname.startsWith(item.href);
        return (
          <Link
            key={item.href}
            href={item.href}
            className={cn(
              "flex flex-1 flex-col items-center gap-1 py-2 text-xs",
              isActive ? "text-primary" : "text-muted-foreground",
            )}
          >
            <Icon className="size-5" />
            {item.label}
          </Link>
        );
      })}
    </nav>
  );
}