import { Tabs } from 'expo-router';
import React from 'react';
import { Platform } from 'react-native';
import { Image } from 'react-native';

import { HapticTab } from '@/components/HapticTab';
import { IconSymbol } from '@/components/ui/IconSymbol';
import TabBarBackground from '@/components/ui/TabBarBackground';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
        tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,
        tabBarStyle: Platform.select({
          ios: {
            // Use a transparent background on iOS to show the blur effect
            position: 'absolute',
          },
          default: {},
        }),
      }}>
      <Tabs.Screen
        name="index"
        options={{
          title: 'News',
          tabBarIcon: ({ focused }) => (
                         <Image
                           source={
                             focused
                               ? require('@/assets/images/news.png')
                               : require('@/assets/images/news.png')
                           }
                           style={{ width: 40, height: 28 }}
                           resizeMode="contain"
                         />
                       ),
        }}
      />
      <Tabs.Screen
              name="explore"
              options={{
                title: 'Fraud Guard',
               tabBarIcon: ({ focused }) => (
                     <Image
                       source={
                         focused
                           ? require('@/assets/images/tabguard.png')
                           : require('@/assets/images/tabguard.png')
                       }
                       style={{ width: 90, height: 28 }}
                       resizeMode="contain"
                     />
                   ),
              }}
            />
    </Tabs>
  );
}
