import React, { useState } from 'react';
import { View } from 'react-native';
import ModuleScreen from './src/screens/ModuleScreen/moduleScreen';
import AlarmsScreen from './src/screens/AlarmScreen/alarmScreen';
import AssetsScreen from './src/screens/AssetsScreen/assetScreen';
import HomeScreen from './src/screens/HomeScreen/homeScreen';
import BottomTabBar, { TabType } from './src/navigation/bottonTabBar';



export default function App(): React.JSX.Element {
  // Use generic type annotation for useState
  const [activeTab, setActiveTab] = useState<TabType>('Home');

  return (
    <View style={{ flex: 1 }}>
      
      {/* SCREEN AREA */}
      <View style={{ flex: 1 }}>
        {activeTab === 'Home' && <HomeScreen />}
        {activeTab === 'Assets' && <AssetsScreen />}
        {/* {activeTab === 'Scan' && <ScanScreen />} */}
        {activeTab === 'Alarms' && <AlarmsScreen />}
        {activeTab === 'More' && <ModuleScreen />}
      </View>

      {/* BOTTOM TAB BAR */}
      <BottomTabBar activeTab={activeTab} setActiveTab={setActiveTab} />
      
    </View>
  );
}