import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import React from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { IconSymbol } from '../components/ui/icon-symbol';
import Chats from './tabs/chats';
import Settings from './tabs/settings';

const Tab = createBottomTabNavigator();

export default function Main() {
  const insets = useSafeAreaInsets();
  
  return (
    <Tab.Navigator
      tabBarOptions={{
        labelStyle: {
          fontSize: 12,
          fontWeight: '700',
          marginTop: 1
        },
        style: {
          height: 75 + insets.bottom,
          borderTopLeftRadius: 35,
          borderTopRightRadius: 35,
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 6 },
          shadowOpacity: 0.12,
          shadowRadius: 12,
          paddingTop: 15,
          paddingBottom: 5
        }
      }}
      sceneContainerStyle={{
        marginTop: insets.top
      }}
    >
      <Tab.Screen
        name="Chats"
        component={Chats}
        options={{
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="chat-bubble" color={color} />,
        }}
      />
      <Tab.Screen
        name="Settings"
        component={Settings}
        options={{
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="settings" color={color} />,
        }}
      />
    </Tab.Navigator>
  );
}