import React from 'react';
import clsx from 'clsx';

interface NavTabProps {
  tabs: { id: number; title: string }[];
  activeTab: number;
  setActiveTab: (idx: number) => void;
}

const NavTab: React.FC<NavTabProps> = ({ tabs, activeTab, setActiveTab }) => {
  return (
    <ul className="flex justify-center mb-20 space-x-16">
      {tabs.map((tab) => (
        <li
          key={tab.id}
          className={clsx('text-base cursor-pointer', {
            'text-blue font-bold border-b-[3px] border-blue':
              activeTab === tab.id,
            'font-medium': activeTab !== tab.id,
          })}
          onClick={() => setActiveTab(tab.id)}
        >
          {tab.title}
        </li>
      ))}
    </ul>
  );
};

export default NavTab;