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

export default function TabLayout() {
    return (
        <Tabs
            screenOptions={{
                tabBarActiveTintColor: '#ffd33d',
                headerStyle: {
                    backgroundColor: '#25292e',
                },
                headerShadowVisible: false,
                headerTintColor: '#fff',
                tabBarStyle: {
                    backgroundColor: '#25292e',
                },
            }}>
            <Tabs.Screen name="index" options={{
                title: 'Home', headerShown: false, tabBarIcon: ({ color, focused }) => (
                    <Ionicons name={focused ? 'home-sharp' : 'home-outline'} color={color} size={24} />
                )
            }} />
            <Tabs.Screen name="posts" options={{
                title: 'Posts', headerShown: false, tabBarIcon: ({ color, focused }) => (
                    <Ionicons name={focused ? 'rocket-sharp' : 'rocket-outline'} size={24} color={color} />
                )
            }} />
            <Tabs.Screen name="login" options={{
                title: 'Login', headerShown: false, tabBarIcon: ({ color, focused }) => (
                    <Ionicons name={focused ? 'person-circle-sharp' : 'person-circle-outline'} size={24} color={color} />
                )
            }} />
        </Tabs>
    );
}