import ProjectInfo from '../components/config/ProjectInfo'
import RemoteControl from '../components/config/RemoteControl'
import ShortcutPanel from '../components/config/ShortcutPanel'
import PublishSettings from '../components/config/PublishSettings'
import DeviceTest from '../components/config/DeviceTest'
import AboutPanel from '../components/config/AboutPanel'
import type { ConfigMenu } from '../configMenus'

export default function ConfigView({ menu }: { menu: ConfigMenu }): React.JSX.Element {
  return (
    <div className="config-shell">
      <div className="config-area">
        {menu === 'info' && <ProjectInfo />}
        {menu === 'remote' && <RemoteControl />}
        {menu === 'shortcut' && <ShortcutPanel />}
        {menu === 'publish' && <PublishSettings />}
        {menu === 'device' && <DeviceTest />}
        {menu === 'about' && <AboutPanel />}
      </div>
    </div>
  )
}
