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-border bg-bg-1 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-[13px] font-bold transition-all duration-200
              font-korean tracking-tight
              ${
                activeSubTab === item.id
                  ? 'text-primary-cyan bg-[rgba(6,182,212,0.12)] border-b-2 border-primary-cyan'
                  : 'text-text-2 hover:text-text-1 hover:bg-[rgba(255,255,255,0.06)]'
              }
            `}
          >
            <span className="mr-1.5">{item.icon}</span>
            {item.label}
          </button>
        ))}
      </div>
    </div>
  )
}