/**
 * @file PageTabs.tsx
 * @description Shared top-of-page tab bar used by the pages that merged several
 * former routes into one (Settings hub, Sessions/Events history). Rendering only -
 * the owning page keeps the active tab in its own query param.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */
import type { ComponentType } from "react";

export interface PageTab {
  id: string;
  label: string;
  Icon: ComponentType<{ className?: string }>;
}

interface PageTabsProps {
  tabs: PageTab[];
  activeId: string;
  onSelect: (id: string) => void;
  ariaLabel: string;
}

/**
 * Horizontal tab strip for a page that hosts several panels.
 * @param props - Tabs to render, the active tab id, and the selection callback.
 * @returns The tab bar element.
 */
export function PageTabs({ tabs, activeId, onSelect, ariaLabel }: PageTabsProps) {
  return (
    <div
      role="tablist"
      aria-label={ariaLabel}
      className="flex items-center gap-1.5 overflow-x-auto no-scrollbar border-b border-border/60 pb-2"
    >
      {tabs.map(({ id, label, Icon }) => {
        const isActive = id === activeId;
        return (
          <button
            key={id}
            type="button"
            role="tab"
            aria-selected={isActive}
            onClick={() => onSelect(id)}
            className={`inline-flex items-center gap-1.5 text-xs whitespace-nowrap px-3 py-1.5 rounded-lg border transition-colors flex-shrink-0 ${
              isActive
                ? "bg-accent/15 border-accent/30 text-accent"
                : "border-border text-fg-secondary hover:text-fg-primary hover:bg-surface-3"
            }`}
          >
            <Icon className="w-3.5 h-3.5" />
            {label}
          </button>
        );
      })}
    </div>
  );
}