import { NavLink } from "react-router-dom";
import { useTranslation } from "react-i18next";
import type { NavIconName } from "@/theme/appearance.config";
import { NavIcon } from "@/components/ui/NavIcon";

const NAV_ITEMS: Array<{ to: string; labelKey: string; icon: NavIconName }> = [
  { to: "/", labelKey: "nav.dashboard", icon: "dashboard" },
  { to: "/breakfast", labelKey: "nav.breakfast", icon: "coffee" },
  { to: "/second-breakfast", labelKey: "nav.secondBreakfast", icon: "croissant" },
  { to: "/lunch", labelKey: "nav.lunch", icon: "soup" },
  { to: "/dinner", labelKey: "nav.dinner", icon: "moon" },
  { to: "/all-meals", labelKey: "nav.allMeals", icon: "list" },
  { to: "/manage-meals", labelKey: "nav.manageMeals", icon: "book" },
  { to: "/ingredients", labelKey: "nav.ingredientCatalog", icon: "leaf" },
  { to: "/diet", labelKey: "nav.dietTracker", icon: "diet" },
  { to: "/meal-planner", labelKey: "nav.mealPlanner", icon: "calendar" },
  { to: "/diet-generator", labelKey: "nav.dietGenerator", icon: "diet" },
  { to: "/recipe-generator", labelKey: "nav.recipeGenerator", icon: "book" },
  { to: "/shopping-list", labelKey: "nav.shoppingList", icon: "cart" },
];

export function HorizontalNav() {
  const { t } = useTranslation();

  return (
    <nav
      className="border-b border-slate-200 bg-white/90 backdrop-blur dark:border-slate-800 dark:bg-slate-900/90"
      aria-label="Main"
    >
      <div className="flex gap-1 overflow-x-auto px-4 py-2 sm:px-6">
        {NAV_ITEMS.map(({ to, labelKey, icon }) => (
          <NavLink
            key={to}
            to={to}
            end={to === "/"}
            className={({ isActive }) =>
              `inline-flex shrink-0 items-center gap-2 rounded-xl px-3.5 py-2 text-sm font-medium transition ${
                isActive
                  ? "bg-brand-600 text-white shadow-sm"
                  : "text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
              }`
            }
          >
            <NavIcon name={icon} className="h-4 w-4 shrink-0" />
            {t(labelKey)}
          </NavLink>
        ))}
      </div>
    </nav>
  );
}
