import React from 'react';

type ITabsMenu = {
  activeTab: string;
  items: { title: string }[];
  onTabClick: (tab: string) => void;
};

const TabsMenu = ({ activeTab, items, onTabClick }: ITabsMenu): JSX.Element => {
  return (
    <div className="flex w-full h-auto space-x-4 overflow-x-auto hide-scrollbar">
      {items?.map(({ title }, key) => {
        return (
          <div
            key={key}
            onClick={() => onTabClick(title)}
            className={`${
              activeTab === title
                ? 'border-b-2 border-primary text-primary'
                : 'text-black'
            } text-xs font-semibold px-2 py-2 cursor-pointer min-w-[80px] text-left`}
          >
            {title}
          </div>
        );
      })}
    </div>
  );
};

export default TabsMenu;