import { Ionicons } from "@expo/vector-icons";
import { Tabs } from "expo-router";

const iconSize = 22;

export default function TabLayout() {
	return (
		<Tabs screenOptions={{ headerShown: false }}>
			<Tabs.Screen
				name="orchestrator"
				options={{
					title: "Orchestrator",
					tabBarLabel: "Orchestrator",
					tabBarIcon: ({ color, focused }) => (
						<Ionicons
							color={color}
							name={focused ? "flash" : "flash-outline"}
							size={iconSize}
						/>
					),
				}}
			/>
			<Tabs.Screen
				name="index"
				options={{
					title: "BLE",
					tabBarLabel: "BLE",
					tabBarIcon: ({ color, focused }) => (
						<Ionicons
							color={color}
							name={focused ? "bluetooth" : "bluetooth-outline"}
							size={iconSize}
						/>
					),
				}}
			/>
			<Tabs.Screen
				name="todos"
				options={{
					title: "Todos",
					tabBarLabel: "Todos",
					tabBarIcon: ({ color, focused }) => (
						<Ionicons
							color={color}
							name={focused ? "checkmark-done" : "checkmark-done-outline"}
							size={iconSize}
						/>
					),
				}}
			/>
			<Tabs.Screen
				name="stocks"
				options={{
					title: "Stocks",
					tabBarLabel: "Stocks",
					tabBarIcon: ({ color, focused }) => (
						<Ionicons
							color={color}
							name={focused ? "stats-chart" : "stats-chart-outline"}
							size={iconSize}
						/>
					),
				}}
			/>
			<Tabs.Screen
				name="settings"
				options={{
					title: "Settings",
					tabBarLabel: "Settings",
					tabBarIcon: ({ color, focused }) => (
						<Ionicons
							color={color}
							name={focused ? "settings" : "settings-outline"}
							size={iconSize}
						/>
					),
				}}
			/>
		</Tabs>
	);
}