"use client";

import { Home, Film, Tv, Music, User } from "lucide-react";
import { useAppStore, useAuthStore, type ViewName } from "@/lib/store";
import { cn } from "@/lib/utils";

const ITEMS: { view: ViewName; label: string; icon: any }[] = [
  { view: "home", label: "خانه", icon: Home },
  { view: "movies", label: "فیلم", icon: Film },
  { view: "live", label: "زنده", icon: Tv },
  { view: "music", label: "موزیک", icon: Music },
  { view: "profile", label: "پروفایل", icon: User },
];

export function MobileNav() {
  const navigate = useAppStore((s) => s.navigate);
  const currentView = useAppStore((s) => s.view);

  return (
    <nav className="md:hidden fixed bottom-0 inset-x-0 z-50 glass-strong border-t border-border">
      <div className="flex items-stretch justify-around px-1 py-1.5" style={{ paddingBottom: "env(safe-area-inset-bottom)" }}>
        {ITEMS.map((item) => {
          const Icon = item.icon;
          const active = currentView === item.view;
          return (
            <button
              key={item.view}
              onClick={() => navigate(item.view)}
              className={cn(
                "flex flex-col items-center justify-center gap-0.5 px-3 py-1.5 rounded-lg transition flex-1",
                active ? "text-primary" : "text-muted-foreground",
              )}
              aria-label={item.label}
            >
              <Icon className={cn("h-5 w-5", active && "drop-shadow-[0_0_8px_rgba(124,58,237,0.6)]")} />
              <span className="text-[10px] font-medium">{item.label}</span>
            </button>
          );
        })}
      </div>
    </nav>
  );
}