"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";

const PROJECTS_TABS = [
  { href: "/departments/projects", label: "Resumen" },
  { href: "/departments/projects/projects", label: "Proyectos" },
  { href: "/departments/projects/meetings", label: "Reuniones" },
  { href: "/departments/projects/capture", label: "Captura" },
  { href: "/departments/projects/team", label: "Equipo" },
];

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

  return (
    <section className="rounded-benell border border-benell-stroke bg-benell-surface p-4 shadow-benell">
      <p className="text-xs font-semibold uppercase tracking-wide text-benell-brown">Departamento de Proyectos</p>
      <div className="mt-3 flex flex-wrap gap-2">
        {PROJECTS_TABS.map((tab) => {
          const isActive = pathname === tab.href || pathname.startsWith(`${tab.href}/`);

          return (
            <Link
              key={tab.href}
              href={tab.href}
              className={cn(
                "inline-flex items-center rounded-full px-3 py-1.5 text-sm font-semibold transition",
                isActive ? "bg-benell-brown text-white" : "bg-benell-surface-muted text-benell-text hover:bg-benell-brown/10"
              )}
            >
              {tab.label}
            </Link>
          );
        })}
      </div>
    </section>
  );
}
