"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useSession } from "next-auth/react";
import { DEPARTMENT_OPTIONS } from "@/lib/departments";
import { getDepartmentHomeRoute } from "@/lib/access-control";
import { cn } from "@/lib/utils";

export default function DepartmentWorkspaceTabs() {
  const pathname = usePathname();
  const { data: session } = useSession();

  if (session?.user?.role !== "owner") {
    return null;
  }

  return (
    <section className="mb-5 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">Departamentos</p>
      <div className="mt-3 flex flex-wrap gap-2">
        {DEPARTMENT_OPTIONS.map((option) => {
          const href = getDepartmentHomeRoute(option.value);
          const isActive = pathname === href || pathname.startsWith(`${href}/`);

          return (
            <Link
              key={option.value}
              href={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"
              )}
            >
              {option.label}
            </Link>
          );
        })}
      </div>
    </section>
  );
}
