interface Tab {
  key: string;
  label: string;
  badge?: number;
}

interface Props {
  tabs: Tab[];
  active: string;
  onChange: (key: string) => void;
}

export default function SubTabs({ tabs, active, onChange }: Props) {
  return (
    <div className="sub-tabs">
      {tabs.map(tab => (
        <button
          key={tab.key}
          className={`sub-tab${active === tab.key ? ' sub-tab-active' : ''}`}
          onClick={() => onChange(tab.key)}
        >
          {tab.label}
          {tab.badge != null && tab.badge > 0 && (
            <span className="sub-tab-badge">{tab.badge}</span>
          )}
        </button>
      ))}
    </div>
  );
}