"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Home, MapPin, Info, Waves } from "lucide-react";
import { cn } from "@/lib/utils";

const tabs = [
  {
    name: "Accueil",
    href: "/accueil",
    icon: Home,
  },
  {
    name: "Explorer",
    href: "/explorer",
    icon: MapPin,
  },
  {
    name: "Mana",
    href: "/mana-tracker",
    icon: Waves,
  },
  {
    name: "Infos",
    href: "/infos",
    icon: Info,
  },
];

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

  return (
    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-200 shadow-lg">
      <div className="flex items-center justify-around h-16 px-2">
        {tabs.map((tab) => {
          const Icon = tab.icon;
          const isActive = pathname === tab.href;
          return (
            <Link
              key={tab.href}
              href={tab.href}
              className={cn(
                "flex flex-col items-center justify-center gap-1 flex-1 h-full rounded-xl transition-colors",
                isActive
                  ? "text-primary bg-secondary"
                  : "text-gray-500 hover:text-primary hover:bg-gray-50"
              )}
            >
              <Icon className="h-6 w-6" />
              <span className="text-xs font-medium">{tab.name}</span>
            </Link>
          );
        })}
      </div>
    </nav>
  );
}