import React from 'react';

const TabsStructure = ({ activeTab, setActiveTab, tabs }) => {
  return (
    <div className="flex justify-center items-center w-full">
      {tabs.map((tab) => (
        <button
          key={tab.id}
          className={`tab px-4 py-2 mx-2 flex items-center justify-center space-x-2 min-h-[44px] ${
            activeTab === tab.id
              ? 'bg-primary text-white shadow-sm'
              : 'bg-primary/10 text-primary hover:bg-primary/20'
          } rounded-full font-label font-medium transition-colors`}
          onClick={() => setActiveTab(tab.id)}
        >
          <tab.icon className="w-5 h-5" />
          <span>{tab.title}</span>
        </button>
      ))}
    </div>
  );
};

export default TabsStructure;
