import type { TabType } from "@/types/asset-settings";
import { cn } from "@/lib/utils";
import { PRIMARY_COLOR } from "@/lib/common";

export interface TabNavigationProps {
  activeTab: TabType;
  onTabChange: (tab: TabType) => void;
}

const TABS: { id: TabType; label: string }[] = [
  { id: "grouping", label: "Grouping" },
  { id: "bridge", label: "Bridge" },
  { id: "bridge-group", label: "Bridge Group" },
];

const TAB_BASE_CLASS =
  "py-4 px-1 border-b-2 font-medium text-sm transition-colors";
const TAB_ACTIVE_CLASS = "border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300";

export function TabNavigation({ activeTab, onTabChange }: TabNavigationProps) {
  return (
    <div className="mb-6 border-b border-slate-200">
      <nav className="-mb-px flex gap-8">
        {TABS.map(({ id, label }) => (
          <button
            key={id}
            type="button"
            onClick={() => onTabChange(id)}
            className={cn(TAB_BASE_CLASS, activeTab === id ? "" : TAB_ACTIVE_CLASS)}
            style={
              activeTab === id
                ? { borderBottomColor: PRIMARY_COLOR, color: PRIMARY_COLOR }
                : undefined
            }
          >
            {label}
          </button>
        ))}
      </nav>
    </div>
  );
}