import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { View } from "react-native";
import Text from "../components/bases/Text";
import PaymentStackNavigator from "./PaymentStackNavigation";

const Tab = createBottomTabNavigator();

export const MyTabs = () => {
	return (
		<Tab.Navigator initialRouteName="Acceuil" screenOptions={{ headerShown: false }}>
			<Tab.Screen name="Acceuil" component={PaymentStackNavigator} />
			<Tab.Screen name="Transactions" component={Transactions} />
			<Tab.Screen name="Paramètres" component={SettingsScreen} />
			<Tab.Screen name="Profile" component={ProfileScreen} />
		</Tab.Navigator>
	);
};

const HomeScreen = () => {
	return (
		<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
			<Text>Home!</Text>
		</View>
	);
};

const Transactions = () => {
	return (
		<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
			<Text>Transactions!</Text>
		</View>
	);
};

const SettingsScreen = () => {
	return (
		<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
			<Text>Settings!</Text>
		</View>
	);
};

const ProfileScreen = () => {
	return (
		<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
			<Text>Profile!</Text>
		</View>
	);
};