const FilterTabs = ({ tabs, activeTab, onTabChange }) => {
  return (
    <div className="flex justify-center mb-10">
      <div className="inline-flex gap-1 p-2 bg-white/40 backdrop-blur-xl rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.08)] border border-white/60 relative z-10 transition-all duration-300 hover:bg-white/50 hover:shadow-[0_8px_30px_rgb(0,0,0,0.12)]">
        {tabs.map((tab) => {
          const isActive = tab.key === activeTab;
          return (
            <button
              key={tab.key}
              onClick={() => !tab.disabled && onTabChange(tab.key)}
              className={`
                group relative px-5 py-2.5 text-sm font-medium rounded-lg
                transition-all duration-250 ease-out 
                ${
                  tab.disabled
                    ? "opacity-60 cursor-default bg-transparent text-gray-400"
                    : isActive
                    ? "bg-primary-600 text-white shadow-md cursor-pointer"
                    : "text-dark-700 hover:bg-white/40 hover:text-primary-600 cursor-pointer"
                }
              `}
            >
              {tab.label}
              {tab.disabled && (
                <span className="absolute -top-10 left-1/2 -translate-x-1/2 px-3 py-1 bg-dark-900 text-white text-xs font-bold rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap pointer-events-none z-10">
                  Coming Soon
                  <span className="absolute top-full left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-dark-900"></span>
                </span>
              )}
            </button>
          );
        })}
      </div>
    </div>
  );
};

export default FilterTabs;
