import { Text, View } from '@tarojs/components'
import './index.scss'

export interface TabItem<T extends string> {
  key: T
  label: string
  badge?: number
}

interface SegmentedTabsProps<T extends string> {
  items: TabItem<T>[]
  value: T
  onChange: (value: T) => void
  className?: string
}

export function SegmentedTabs<T extends string>({ items, value, onChange, className = '' }: SegmentedTabsProps<T>) {
  return (
    <View className={`seg-tabs ${className}`}>
      {items.map(item => (
        <View
          key={item.key}
          className={`seg-tabs__item ${value === item.key ? 'seg-tabs__item--active' : ''}`}
          onClick={() => onChange(item.key)}
        >
          <Text>{item.label}</Text>
          {item.badge ? <Text className='seg-tabs__badge'>{item.badge}</Text> : null}
        </View>
      ))}
    </View>
  )
}

export default SegmentedTabs

