"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { BookOpen, Scissors, Users, Home } from "lucide-react";

const mobileMenuItems = [
  { name: "Inicio", href: "/", icon: Home },
  { name: "Lecturas", href: "/lecturas", icon: BookOpen },
  { name: "Cortes", href: "/cortes", icon: Scissors },
  { name: "Socios", href: "/socios", icon: Users },
];

export default function MobileNav() {
  const pathname = usePathname();

  return (
    <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-50 md:hidden">
      <div className="flex justify-around items-center h-16">
        {mobileMenuItems.map((item) => {
          const isActive = pathname === item.href || 
            (item.href !== "/" && pathname.startsWith(item.href));
          
          return (
            <Link
              key={item.href}
              href={item.href}
              className={`flex flex-col items-center justify-center flex-1 h-full ${
                isActive
                  ? "text-blue-600"
                  : "text-gray-600"
              }`}
            >
              <item.icon className="w-6 h-6 mb-1" />
              <span className="text-xs font-medium">{item.name}</span>
            </Link>
          );
        })}
      </div>
    </nav>
  );
}