"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Home, Film, Newspaper, Music, User } from "lucide-react";
import { useTranslation } from "@/i18n";

const NAV_ITEMS = [
  { key: "nav_home", icon: Home, path: "/" },
  { key: "nav_shorts", icon: Film, path: "/shorts" },
  { key: "nav_feeds", icon: Newspaper, path: "/feeds" },
  { key: "nav_music", icon: Music, path: "/music" },
  { key: "nav_profile", icon: User, path: "/profile" },
] as const;

export function MobileBottomNav() {
  const pathname = usePathname();
  const { t } = useTranslation();

  return (
    <nav
      className="fixed bottom-0 left-0 right-0 z-40 md:hidden border-t"
      style={{
        background: "var(--bg)",
        borderColor: "var(--border)",
        height: "56px",
        paddingBottom: "env(safe-area-inset-bottom, 0px)",
      }}
    >
      <div className="flex items-stretch h-full">
        {NAV_ITEMS.map(({ key, icon: Icon, path }) => {
          const isActive =
            path === "/" ? pathname === "/" : pathname.startsWith(path);
          return (
            <Link
              key={path}
              href={path}
              className="flex-1 flex flex-col items-center justify-center gap-0.5 transition-colors active:opacity-70"
              style={{
                color: isActive ? "var(--accent)" : "var(--text-muted)",
              }}
            >
              <Icon size={22} strokeWidth={isActive ? 2 : 1.6} />
              <span className="text-[9px] font-medium leading-tight">
                {t(key)}
              </span>
            </Link>
          );
        })}
      </div>
    </nav>
  );
}