import { useSubMenu } from '@common/hooks/useSubMenu'
import { AerialTheoryView } from './AerialTheoryView'
import { MediaManagement } from './MediaManagement'
import { OilAreaAnalysis } from './OilAreaAnalysis'
import { RealtimeDrone } from './RealtimeDrone'
import { SensorAnalysis } from './SensorAnalysis'
import { SatelliteRequest } from './SatelliteRequest'
import { WingAI } from './WingAI'
import { CctvView } from './CctvView'

export function AerialView() {
  const { activeSubTab } = useSubMenu('aerial')

  const renderContent = () => {
    switch (activeSubTab) {
      case 'theory':
        return <AerialTheoryView />
      case 'satellite':
        return <SatelliteRequest />
      case 'spectral':
        return <WingAI />
      case 'cctv':
        return <CctvView />
      case 'analysis':
        return <OilAreaAnalysis />
      case 'realtime':
        return <RealtimeDrone />
      case 'sensor':
        return <SensorAnalysis />
      case 'media':
      default:
        return <MediaManagement />
    }
  }

  return (
    <div className="flex flex-col h-full w-full bg-bg-0">
      <div className="flex-1 overflow-auto px-6 py-5">
        {renderContent()}
      </div>
    </div>
  )
}