import { FC } from 'react';

interface TabbarProps {
  tabs: string[];
  selectedTab: number;
  setSelectedTab: (tab: number) => void;
}

const Tabbar: FC<TabbarProps> = ({ tabs, selectedTab, setSelectedTab }) => {
  return (
    <ul className="mb-4 flex list-none flex-row flex-wrap border-b-0 pl-0">
      {tabs.map((tab, i) => (
        <li key={`${tab}-${i}`}>
          <button
            key={i}
            className={`${selectedTab === i ? 'text-white underline' : 'text-neutral-500'} my-2 block border-x-0 border-b-2 border-t-0 border-slate-100 bg-zinc-900 px-7 text-sm font-medium uppercase`}
            onClick={() => setSelectedTab(i)}
          >
            {tab}
          </button>
        </li>
      ))}
    </ul>
  );
};

export default Tabbar;