/**
 * Einheitliche Sektions-Navigation: Chip-Zeile wie Admin-Stammdaten (.admin-page-subtabs).
 * Für „Tabs“ (role=tablist) oder kompakte Umschalter (aria-pressed, role=group).
 */
export default function PageSectionNav({
  ariaLabel,
  value,
  onChange,
  items,
  className = '',
  iconSize = 16,
  semantics = 'tabs',
}) {
  const isToggle = semantics === 'toggle'
  return (
    <div
      className={`admin-page-subtabs page-section-nav ${className}`.trim()}
      role={isToggle ? 'group' : 'tablist'}
      aria-label={ariaLabel}
    >
      {items.map((item) => {
        const Icon = item.icon
        const active = value === item.id
        const disabled = Boolean(item.disabled)
        return (
          <button
            key={item.id}
            type="button"
            role={isToggle ? undefined : 'tab'}
            aria-selected={isToggle ? undefined : active}
            aria-pressed={isToggle ? active : undefined}
            disabled={disabled}
            className={
              'admin-page-subtabs__btn' +
              (active ? ' admin-page-subtabs__btn--active' : '')
            }
            onClick={() => {
              if (!disabled) onChange(item.id)
            }}
          >
            {Icon ? (
              <Icon size={iconSize} strokeWidth={2} className="page-section-nav__icon" aria-hidden />
            ) : null}
            <span>{item.label}</span>
          </button>
        )
      })}
    </div>
  )
}
