import { Outlet, NavLink } from 'react-router-dom'
import { CAPTURE_SHELL_NAV_ITEMS } from '../config/captureNav'

/**
 * Erfassung: Mobil Chip-Leiste, Desktop linke Spalte – Wechsel zwischen Masken ohne Hub.
 */
export default function CaptureShell() {
  return (
    <div className="capture-shell">
      <div className="capture-shell__layout">
        <nav className="capture-shell__nav-wrap" aria-label="Erfassungsbereiche">
          <div className="capture-shell__nav">
            {CAPTURE_SHELL_NAV_ITEMS.map((e) => (
              <NavLink
                key={e.to}
                to={e.to}
                end={e.to === '/capture'}
                className={({ isActive }) =>
                  'capture-shell__nav-item' +
                  (isActive ? ' capture-shell__nav-item--active' : '') +
                  (e.highlight ? ' capture-shell__nav-item--highlight' : '')
                }
              >
                <span className="capture-shell__nav-icon" aria-hidden>{e.icon}</span>
                <span className="capture-shell__nav-label">{e.label}</span>
              </NavLink>
            ))}
          </div>
        </nav>
        <div className="capture-shell__main">
          <Outlet />
        </div>
      </div>
    </div>
  )
}