import { StatusBar } from "expo-status-bar";
import { StyleSheet, View } from "react-native";
import { BottomNav } from "./src/components/BottomNav";
import { NotFoundPage } from "./src/pages/NotFound";
import { ImagePage } from "./src/pages/image";
import { IndexPage } from "./src/pages/index";
import { TextPage } from "./src/pages/text";
import { Route, RouterProvider, useRouter } from "./src/router";
interface Tab {
  label: string;
  route: Route;
  page: React.ComponentType;
}
const TABS: Tab[] = [
  { label: "Home", route: "home", page: IndexPage },
  { label: "Text", route: "text", page: TextPage },
  { label: "Image", route: "image", page: ImagePage },
];
export { TABS, type Tab };

function Screen() {
  const { route } = useRouter();
  return (
    <>
      {TABS.map((tab) => {
        if (tab.route === route) {
          const Page = tab.page;
          return <Page key={tab.route} />;
        }
        return null;
      })}
      {!TABS.some((tab) => tab.route === route) && <NotFoundPage />}
    </>
  );
}

export default function App() {
  return (
    <RouterProvider>
      <View style={styles.container}>
        <StatusBar style="auto" />
        <Screen />
        <BottomNav />
      </View>
    </RouterProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
});


function Screen() {
  const { route } = useRouter();
  return (
    <>
      {TABS.map((tab) => {
        if (tab.route === route) {
          const Page = tab.page;
          return <Page key={tab.route} />;
        }
        return null;
      })}
      {!TABS.some((tab) => tab.route === route) && <NotFoundPage />}
    </>
  );
}

export default function App() {
  return (
    <RouterProvider>
      <View style={styles.container}>
        <StatusBar style="auto" />
        <Screen />
        <BottomNav />
      </View>
    </RouterProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
});