import { CalendarClock, NotebookTabs, User, Utensils } from "lucide-react";
import { Link } from "react-router";
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  navigationMenuTriggerStyle,
} from "~/components/ui/navigation-menu";
import { cn } from "~/lib/utils";

const navigationMenuItems = [
  { title: "Colles", id: "colles", href: "/", icon: CalendarClock },
  { title: "Repas", id: "repas", href: "/repas", icon: Utensils },
  { title: "Notes", id: "grades", href: "/grades", icon: NotebookTabs },
  { title: "Profil", id: "settings", href: "/settings", icon: User },
];

export default function BottomNavigation({ activeId }: { activeId: string }) {
  return (
    <div className="fixed bottom-0 left-0 right-0 bg-background border-t border-border z-50">
      <div className="flex items-center justify-center">
        <NavigationMenu>
          <NavigationMenuList>
            {navigationMenuItems.map((item) => (
              <NavigationMenuItem key={item.title}>
                <NavigationMenuLink
                  className={cn(
                    navigationMenuTriggerStyle(),
                    "flex flex-col h-auto items-center px-5 py-2.5"
                  )}
                  data-active={item.id === activeId}
                  asChild
                >
                  <Link to={item.href}>
                    <item.icon className="mb-1.5 h-5 w-5" />
                    {item.title}
                  </Link>
                </NavigationMenuLink>
              </NavigationMenuItem>
            ))}
          </NavigationMenuList>
        </NavigationMenu>
      </div>
    </div>
  );
}