import { Outlet, NavLink } from 'react-router-dom'
import { ADMIN_NAV_GROUPS } from '../config/adminNav'

export default function AdminShell() {
  return (
    <div className="admin-shell">
      <div className="admin-shell__layout">
        <nav className="admin-shell__nav-wrap" aria-label="Adminbereich">
          <div className="admin-shell__nav-groups">
            {ADMIN_NAV_GROUPS.map((group) => (
              <div key={group.id} className="admin-shell__nav-group">
                <div className="admin-shell__group-title">{group.label}</div>
                <div className="admin-shell__group-chips">
                  {group.items.map((item) => (
                    <NavLink
                      key={`${group.id}-${item.to}`}
                      to={item.to}
                      end={!!item.end}
                      className={({ isActive }) =>
                        'admin-shell__nav-item' +
                        (isActive ? ' admin-shell__nav-item--active' : '')
                      }
                    >
                      {item.label}
                    </NavLink>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </nav>
        <div className="admin-shell__main">
          <div className="admin-page">
            <Outlet />
          </div>
        </div>
      </div>
    </div>
  )
}