import { TabType } from "@/types/asset-settings";

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

export function TabNavigation({
  activeTab,
  onTabChange,
}: TabNavigationProps) {
  return (
    <div className="mb-6 border-b border-slate-200">
      <nav className="-mb-px flex gap-8">
        <button
          onClick={() => onTabChange("grouping")}
          className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
            activeTab === "grouping"
              ? "border-[#428B4D] text-[#428B4D]"
              : "border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300"
          }`}
        >
          Grouping
        </button>
        <button
          onClick={() => onTabChange("bridge")}
          className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
            activeTab === "bridge"
              ? "border-[#428B4D] text-[#428B4D]"
              : "border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300"
          }`}
        >
          Bridge
        </button>
        <button
          onClick={() => onTabChange("bridge-group")}
          className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
            activeTab === "bridge-group"
              ? "border-[#428B4D] text-[#428B4D]"
              : "border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300"
          }`}
        >
          Bridge Group
        </button>
      </nav>
    </div>
  );
}