import { Tabs } from 'expo-router';
import Ionicons from '@expo/vector-icons/Ionicons';
import { useTheme } from 'react-native-paper';


export default function TabLayout() {
  const theme = useTheme();
  console.log(theme.colors);
  return (
    <Tabs  screenOptions ={{ 
      tabBarInactiveTintColor: theme.colors.primary,
      tabBarActiveTintColor:theme.colors.onPrimary, 
      tabBarStyle: {
        backgroundColor: theme.colors.primaryContainer,
        borderTopWidth: 0,
      },
      headerStyle: {
        backgroundColor: theme.colors.primaryContainer,
        borderBottomWidth:0
      },
      headerTintColor: theme.colors.primary,
      tabBarItemStyle: { flex: 1 },
      }}>
      <Tabs.Screen name="index" options={{ title: 'Home',tabBarIcon: ({ color, focused }) => (
            <Ionicons name={focused ? 'home-sharp' : 'home-outline'} color={color} size={24} />
          ), }} />
      <Tabs.Screen name="formScreen" options={{title: 'Create/Edit'  ,tabBarIcon: ({ color, focused }) => (
            <Ionicons name={focused ? 'add-circle-sharp' : 'add-circle-outline'} color={color} size={24} />
          ),}} />
    </Tabs>
  );
}