"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

export function DashboardTab({ slug, name }: { slug: string; name: string }) {
  const pathname = usePathname();
  const isActive = pathname === `/d/${slug}` || pathname.startsWith(`/d/${slug}/`);

  return (
    <Link
      href={`/d/${slug}`}
      className={`shrink-0 px-3 py-2 text-sm transition-colors border-b-2 ${
        isActive
          ? "border-primary text-foreground"
          : "border-transparent text-muted-foreground hover:text-foreground"
      }`}
    >
      {name}
    </Link>
  );
}