import { Navigate, Outlet } from 'react-router-dom'
import { ModeAreaShell } from '../../components/ModeAreaShell.jsx'
import { ModeAreaNav } from '../../components/ModeAreaNav.jsx'
import { ModeShell } from '../../components/ModeShell.jsx'
import {
  CONTROL_NAV_ITEMS,
  resolveControlNavActiveKey,
} from '../../config/controlNav.js'

export function ControlLayout() {
  return (
    <div className="app-page">
      <ModeShell modeKey="control" />
      <ModeAreaShell
        nav={
          <ModeAreaNav
            modeLabel="Kontrolle"
            items={CONTROL_NAV_ITEMS}
            resolveActiveKey={resolveControlNavActiveKey}
            showScope
            scopeMutedLabel="Vorhaben wählen"
          />
        }
      >
        <Outlet />
      </ModeAreaShell>
    </div>
  )
}

export function ControlIndexRedirect() {
  return <Navigate to="/control/status" replace />
}