import { Tabs } from '@ark-ui/react';
import { FC } from 'react';

type TabListProps = {
  tabs: {
    label: string;
    value: string;
    hidden?: boolean;
  }[];
};

const TabList: FC<TabListProps> = ({ tabs }) => {
  return (
    <Tabs.List className="flex flex-row gap-1">
      {tabs.map((tab) => (
        <Tabs.Trigger
          className="bg-neutral-2 p-2 px-4 text-gray-9 aria-[selected=true]:bg-white aria-[selected=true]:text-blue-5"
          value={tab.value}
          hidden={tab.hidden}
        >
          {tab.label}
        </Tabs.Trigger>
      ))}
    </Tabs.List>
  );
};

export default TabList;
