/**
 * Sub-Navigation (einheitlich mit Admin-Sektionsschaltern):
 * — Mobil & Desktop: eine horizontale Chip-/Registerzeile oben (scroll auf schmalen Viewports).
 * — Eine darunter liegende „Sub-Sub“-Ebene (z. B. Rahmen bearbeiten) bleibt bewusst
 *   seitlich / in eigenen Layout-Komponenten (z. B. Trainingseinheit, Framework-Editor).
 * Nutzt .capture-shell* aus app.css.
 */
export default function AppSubnavShell({
  ariaLabel,
  items,
  value,
  onChange,
  children,
  iconSize = 18,
}) {
  return (
    <div className="capture-shell app-subnav-shell">
      <div className="capture-shell__layout">
        <div className="capture-shell__nav-wrap">
          <nav className="capture-shell__nav" aria-label={ariaLabel}>
            {items.map((item) => {
              const Icon = item.icon
              const active = value === item.id
              return (
                <button
                  key={item.id}
                  type="button"
                  className={
                    'capture-shell__nav-item' +
                    (active ? ' capture-shell__nav-item--active' : '')
                  }
                  onClick={() => onChange(item.id)}
                >
                  {Icon ? (
                    <Icon
                      className="capture-shell__nav-icon"
                      size={iconSize}
                      strokeWidth={2}
                      aria-hidden
                    />
                  ) : null}
                  <span className="capture-shell__nav-label">{item.label}</span>
                </button>
              )
            })}
          </nav>
        </div>
        <div className="capture-shell__main">{children}</div>
      </div>
    </div>
  )
}