/** Underline tabs with optional mono counts (Direction A v2 pattern). */

export interface TabDef { key: string; label: string; count?: number }

export function Tabs(props: {
  tabs: TabDef[]
  active: string
  onChange: (key: string) => void
}) {
  return (
    <div className="wf-tabs">
      {props.tabs.map((t) => (
        <button
          key={t.key}
          type="button"
          aria-current={t.key === props.active ? 'true' : undefined}
          className={`wf-tab${t.key === props.active ? ' active' : ''}`}
          onClick={() => props.onChange(t.key)}
        >
          {t.label}
          {t.count !== undefined && <span className="count">{t.count}</span>}
        </button>
      ))}
    </div>
  )
}