export interface Tab<Id extends string> {
  id: Id
  label: string
}

interface Props<Id extends string> {
  tabs: Tab<Id>[]
  active: Id
  onChange: (id: Id) => void
}

/** Kennung des Knopfes zu einem Tab – die Panels verweisen mit aria-labelledby darauf. */
export function tabId(id: string): string {
  return `tab-${id}`
}

/** Kennung des Panels zu einem Tab. */
export function panelId(id: string): string {
  return `panel-${id}`
}

/** Tab-Leiste. Native Knöpfe, damit die Tastaturbedienung von selbst funktioniert. */
export default function Tabs<Id extends string>({ tabs, active, onChange }: Props<Id>) {
  return (
    <nav className="tabs" role="tablist" aria-label="Bereiche">
      {tabs.map((tab) => (
        <button
          key={tab.id}
          id={tabId(tab.id)}
          type="button"
          role="tab"
          className={`tabs__button${tab.id === active ? ' tabs__button--active' : ''}`}
          aria-selected={tab.id === active}
          aria-controls={panelId(tab.id)}
          onClick={() => onChange(tab.id)}
        >
          {tab.label}
        </button>
      ))}
    </nav>
  )
}