import { Link, useLocation } from "react-router-dom";
import { Home, Info, Package, Phone, HelpCircle } from "lucide-react";

const items = [
  { icon: Home, label: "Home", path: "/" },
  { icon: Info, label: "About", path: "/about" },
  { icon: Package, label: "Products", path: "/products" },
  { icon: HelpCircle, label: "FAQ", path: "/faq" },
  { icon: Phone, label: "Contact", path: "/contact" },
];

const MobileBottomNav = () => {
  const location = useLocation();

  return (
    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-secondary/95 backdrop-blur-md border-t border-primary/20 md:hidden">
      <div className="flex items-center justify-around h-16">
        {items.map(({ icon: Icon, label, path }) => {
          const active = location.pathname === path;
          return (
            <Link
              key={path}
              to={path}
              className={`flex flex-col items-center justify-center gap-0.5 px-2 py-1 ${
                active ? "text-primary" : "text-muted-foreground"
              }`}
            >
              <Icon size={20} />
              <span className="text-[10px] font-medium">{label}</span>
            </Link>
          );
        })}
      </div>
    </nav>
  );
};

export default MobileBottomNav;
