"use client";

/**
 * ProfileTabs — Instagram-style icon tab strip used under ProfileHeader.
 *
 * Renders a horizontal row of equal-width icon tabs. The active tab gets
 * a top-border indicator and stronger color. Labels are screen-reader
 * only by default (Instagram pattern), but a `showLabels` prop opts them
 * back in for surfaces with more real estate.
 */

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

export type ProfileTab = {
  href: string;
  label: string;
  icon: React.ReactNode;
  /** Additional pathnames that should mark this tab active. Used to keep
   *  the Posts tab lit while the user is on the scroll feed at
   *  /u/<handle>/posts (a sibling route to /u/<handle>). */
  activeFor?: string[];
};

export function ProfileTabs({
  tabs,
  showLabels = false,
}: {
  tabs: ProfileTab[];
  showLabels?: boolean;
}) {
  const pathname = usePathname();
  return (
    <nav aria-label="Profile sections" className="border-b border-border">
      <ul className="flex items-stretch max-w-md mx-auto">
        {tabs.map((tab) => {
          const active =
            pathname === tab.href ||
            (tab.activeFor?.includes(pathname) ?? false);
          return (
            <li key={tab.href} className="flex-1">
              <Link
                href={tab.href}
                aria-current={active ? "page" : undefined}
                title={tab.label}
                className={cn(
                  "h-12 -mb-px flex items-center justify-center gap-2 border-b-2",
                  active
                    ? "border-foreground text-foreground"
                    : "border-transparent text-muted-foreground hover:text-foreground",
                )}
              >
                <span>{tab.icon}</span>
                <span
                  className={cn(
                    "text-[0.65rem] uppercase tracking-[0.2em] font-semibold",
                    showLabels ? "" : "sr-only",
                  )}
                >
                  {tab.label}
                </span>
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}