import styles from './Tabs.module.css'

interface TabItem {
  label: string
  count?: number
  value: string
}

interface TabsProps {
  tabs: TabItem[]
  active: string
  onChange: (value: string) => void
  className?: string
}

export function Tabs({ tabs, active, onChange, className }: TabsProps) {
  return (
    <div className={`${styles.bar} ${className ?? ''}`} role="tablist">
      {tabs.map((tab) => (
        <button
          key={tab.value}
          role="tab"
          aria-selected={tab.value === active}
          className={`${styles.tab} ${tab.value === active ? styles.active : ''}`}
          onClick={() => onChange(tab.value)}
          type="button"
        >
          <span className={styles.label}>{tab.label}</span>
          {tab.count !== undefined && (
            <span className={styles.count}>{tab.count}</span>
          )}
        </button>
      ))}
    </div>
  )
}
