"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { MessageSquare, FileSearch } from "lucide-react";
import { cn } from "@duoc-thu/ui";

const TABS = [
  { href: "/", label: "Trò chuyện AI", icon: MessageSquare },
  { href: "/tra-cuu", label: "Tra cứu Dược thư", icon: FileSearch },
];

export function NavTabs() {
  const pathname = usePathname();

  return (
    <nav className="flex items-center gap-1 rounded-full border border-border-subtle bg-surface p-1 shadow-sm" aria-label="Chuyển chế độ">
      {TABS.map((tab) => {
        const isActive = pathname === tab.href;
        const Icon = tab.icon;
        return (
          <Link
            key={tab.href}
            href={tab.href}
            className={cn(
              "flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs font-semibold transition-all duration-200",
              isActive
                ? "bg-accent-soft text-accent-primary border border-border-accent/40 shadow-sm"
                : "text-txt-muted hover:bg-surface-hover hover:text-txt-primary"
            )}
          >
            <Icon className={cn("h-3.5 w-3.5", isActive ? "text-accent-primary" : "text-txt-muted")} />
            <span>{tab.label}</span>
          </Link>
        );
      })}
    </nav>
  );
}