import type { MainTab } from '../../types/navigation';
import { useSubMenu } from '../../hooks/useSubMenu';

interface SubMenuBarProps {
  activeMainTab: MainTab;
}

export function SubMenuBar({ activeMainTab }: SubMenuBarProps) {
  const { activeSubTab, setActiveSubTab, subMenuConfig } = useSubMenu(activeMainTab);

  // 서브 메뉴가 없는 탭은 표시하지 않음
  if (!subMenuConfig || subMenuConfig.length === 0) {
    return null;
  }

  return (
    <div className="border-b border-stroke bg-bg-surface shrink-0">
      <div className="flex px-5">
        {subMenuConfig.map((item) => (
          <button
            key={item.id}
            onClick={() => setActiveSubTab(item.id)}
            className={`
              px-4 py-2.5 text-title-5 font-medium transition-all duration-200
              font-korean tracking-navigation
              ${activeSubTab === item.id ? 'text-color-accent' : 'text-fg-sub hover:text-fg'}
            `}
          >
            {item.label}
          </button>
        ))}
      </div>
    </div>
  );
}