const TabContainer = ({
  activeTab,
  setActiveTab,
  tabs,
}: {
  activeTab: number;
  setActiveTab: (value: number) => void;
  tabs: string[];
}) => {
  return (
    <div className="w-full flex gap-8 justify-center pb-[2px] border-b mt-2">
      {tabs.map((tab, index) => (
        <div
          key={index}
          onClick={() => setActiveTab(index)}
          onKeyDown={() => {}}
          role="button"
          tabIndex={index}
          className="flex items-center gap-2"
        >
          <p
            className={`text-B12 border-b-[2px] font-bold px-2 transition-all duration-300 ease-in-out ${
              index === activeTab
                ? "text-BLACK border-BLACK"
                : "text-GRAY border-transparent"
            }`}
          >
            {tab}
          </p>
        </div>
      ))}
    </div>
  );
};
export default TabContainer;