interface Tab {
  label: string;
  disabled?: boolean;
}

interface TabsProps {
  tabs: Tab[];
  activeTab: string;
  setActiveTab: (tab: string) => void;
}

export default function UsagerTabs({ tabs, activeTab, setActiveTab }: TabsProps) {
  return (
    <div className="flex gap-1 p-1 bg-[#edf5f1] rounded-2xl mb-1 w-fit">
      {tabs.map((tab) => (
        <button
          key={tab.label}
          disabled={tab.disabled}
          onClick={() => !tab.disabled && setActiveTab(tab.label)}
          className={`
        px-5 py-2.5
        rounded-xl
        text-sm
        font-medium
        transition-all

        ${activeTab === tab.label
              ? "bg-white text-[#2f7d5f] shadow-sm"
              : "text-[#5f7d71] hover:text-[#2f5d4b]"
            }

        ${tab.disabled
              ? "opacity-40 cursor-not-allowed"
              : ""
            }
      `}
        >
          {tab.label}
          {tab.disabled && <span className="ml-2">🔒</span>}
        </button>
      ))}
    </div>
  );
}