import { Outlet, NavLink } from 'react-router-dom'
import { SETTINGS_SHELL_NAV_ITEMS } from '../config/settingsNav'

/**
 * Wie Admin / KI-Analyse: Chips horizontal (mobil) bzw. Seitenleiste (Desktop).
 */
export default function SettingsShell() {
  return (
    <div className="settings-shell">
      <div className="analysis-split">
        <div className="analysis-split__nav-wrap">
          <nav className="analysis-split__nav" aria-label="Einstellungen">
            {SETTINGS_SHELL_NAV_ITEMS.map((item) => (
              <NavLink
                key={item.id}
                to={item.to}
                end={!!item.end}
                className={({ isActive }) =>
                  'analysis-split__nav-item' + (isActive ? ' analysis-split__nav-item--active' : '')
                }
              >
                {item.label}
              </NavLink>
            ))}
          </nav>
        </div>
        <div className="analysis-split__main">
          <Outlet />
        </div>
      </div>
    </div>
  )
}
