import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";

interface Tab {
  id: string;
  label: string;
  icon?: IconDefinition;
}

interface AdminTabNavigationProps {
  tabs: Tab[];
  activeTab: string;
  onTabChange: (tabId: string) => void;
  className?: string;
}

export default function AdminTabNavigation({
  tabs,
  activeTab,
  onTabChange,
  className = "",
}: AdminTabNavigationProps) {
  return (
    <div className={`border-b border-slate-800 ${className}`}>
      <nav className="-mb-px flex flex-wrap gap-1" role="tablist">
        {tabs.map((tab) => {
          const isActive = activeTab === tab.id;
          return (
            <button
              key={tab.id}
              type="button"
              role="tab"
              aria-selected={isActive}
              onClick={() => onTabChange(tab.id)}
              className={`inline-flex items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium transition-colors focus:outline-none ${
                isActive
                  ? "border-indigo-500 text-slate-100"
                  : "border-transparent text-slate-400 hover:border-slate-700 hover:text-slate-200"
              }`}
            >
              {tab.icon && <FontAwesomeIcon icon={tab.icon} className="h-3.5 w-3.5" />}
              {tab.label}
            </button>
          );
        })}
      </nav>
    </div>
  );
}
