import type { PlatformAnalyticsGroup } from "@/lib/platform-analytics";

/** Sticky jump links across connected platform sections on Analytics. */
export function PlatformAnalyticsNav({
  groups,
}: {
  groups: PlatformAnalyticsGroup[];
}) {
  if (groups.length <= 1) {
    return null;
  }

  return (
    <nav
      aria-label="Connected platforms"
      className="sticky top-0 z-10 -mx-1 border-b border-line bg-bg/95 px-1 py-2 backdrop-blur-sm"
    >
      <div
        className="flex gap-1 overflow-x-auto pb-0.5 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
        role="tablist"
      >
        {groups.map((group) => (
          <a
            key={group.provider}
            href={`#${group.sectionId}`}
            className="shrink-0 rounded-pv border border-line bg-surface px-3 py-1.5 text-[0.75rem] font-semibold text-primary transition hover:border-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
          >
            {group.label}
          </a>
        ))}
      </div>
    </nav>
  );
}