import React from 'react';

export interface TabItem {
  id: string;
  label: string;
}

interface TabsProps {
  items: TabItem[];
  activeTab: string;
  onTabChange: (id: string) => void;
  children: React.ReactNode;
  className?: string;
}

const Tabs: React.FC<TabsProps> = ({
                                     items,
                                     activeTab,
                                     onTabChange,
                                     children,
                                     className,
                                   }) => {
  return (
    <div className={className}>
      <div className="flex text-center items-center justify-around h-40">
        {items.map((tab, idx) => (
          <div
            key={tab.id}
            className={`w-full py-4 cursor-pointer text-2xl font-semibold font-['Inter'] ${
              idx !== 0 ? 'border-l' : ''} ${
              idx !== items.length - 1 ? 'border-r' : ''} ${
              activeTab === tab.id ? 'text-black' : 'text-black/25'
            }`}
            style={{ borderColor: '#E0E1E2' }}
            onClick={() => onTabChange(tab.id)}
          >
            {tab.label}
          </div>
        ))}
      </div>

      <div className="mt-6">{children}</div>
    </div>
  );
};

export default Tabs;
