"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@duoc-thu/ui";

const TABS = [
  { href: "/", label: "Trò chuyện" },
  { href: "/tra-cuu", label: "Tra cứu cùng PDF" },
];

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

  return (
    <nav className="flex gap-1" aria-label="Chuyển chế độ">
      {TABS.map((tab) => {
        const isActive = pathname === tab.href;
        return (
          <Link
            key={tab.href}
            href={tab.href}
            className={cn(
              "rounded-full px-3.5 py-1.5 text-sm font-medium transition-colors",
              isActive
                ? "bg-white/20 text-primary-foreground"
                : "text-primary-foreground/70 hover:bg-white/10 hover:text-primary-foreground"
            )}
          >
            {tab.label}
          </Link>
        );
      })}
    </nav>
  );
}