'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { PORTAL_TABS } from '@/lib/constants/portal-navigation';

/**
 * PortalNav — horizontal tab navigation bar for the Client Portal.
 *
 * Renders four tabs (Inicio, Analítica, Canciones, Documentos) with
 * active state determined by the current pathname. The active tab
 * receives accent border and text styling.
 */
export default function PortalNav() {
  const pathname = usePathname();

  return (
    <nav className="w-full border-b border-divisi-border bg-divisi-bg">
      <div className="mx-auto flex max-w-7xl items-center gap-0 px-4">
        {PORTAL_TABS.map((tab) => {
          // For the Analítica tab, match any analytics sub-route
          const isActive = tab.href === '/portal/analytics'
            ? pathname.startsWith('/portal/analytics')
            : pathname === tab.href;

          return (
            <Link
              key={tab.href}
              href={tab.href}
              className={`
                relative px-4 py-3 text-sm font-medium transition-colors duration-150
                ${isActive
                  ? 'border-b-2 border-divisi-accent text-divisi-accent'
                  : 'border-b-2 border-transparent text-divisi-text-secondary hover:text-divisi-text-primary'
                }
              `}
            >
              {tab.label}
            </Link>
          );
        })}
      </div>
    </nav>
  );
}