import React from 'react'
import style from '../styles/category-tab.module.css'
import { useModalStore } from '../stores/useModalStore'
import clsxm from '~/libs/clsxm'
import { ICategoryPromo } from '~/types/promotion'

const TABS: ICategoryPromo[] = [
  { value: 'bundling', label: 'Bundling' },
  { value: 'discount_loading', label: 'Discount Loading' },
  { value: 'merchandise', label: 'Free Merchant' },
]

const ProductPromoCategoryTab = () => {
  const { activeTab, changeTab } = useModalStore()
  return (
    <div className={style.tabs}>
      {TABS.map((tab) => (
        <button
          key={tab.value}
          type='button'
          className={clsxm({
            [style.tab]: true,
            [style.tabActive]: activeTab === tab.value
          })}
          onClick={() => changeTab(tab.value)}
        >
          {tab.label}
        </button>
      ))}
    </div>
  )
}

export default ProductPromoCategoryTab