const FunctionalitiesTabs = ({ tabs, selected, onChange }) => (
  <div className="bg-white border-b border-slate-200 px-6 py-2 flex-shrink-0">
    <div className="max-w-6xl mx-auto flex items-center gap-2">
      <span className="text-[10px] font-bold uppercase tracking-widest text-slate-400 mr-1">Prototype</span>
      {tabs.map(tab => (
        <button
          key={tab.id}
          onClick={() => onChange(tab.id)}
          className={`text-xs font-medium px-3 py-1.5 rounded-lg transition-all ${
            selected === tab.id
              ? "bg-indigo-600 text-white"
              : "text-slate-500 hover:bg-slate-100 hover:text-slate-700"
          }`}
        >
          {tab.label}
        </button>
      ))}
    </div>
  </div>
);

window.SpecComponents = window.SpecComponents || {};
window.SpecComponents.FunctionalitiesTabs = FunctionalitiesTabs;