import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import Svg, { Path, Circle, Rect } from 'react-native-svg';
import HomeScreen from './screens/HomeScreen';
import TestScreen from './screens/TestScreen';
import MessageScreen from './screens/MessageScreen';

const WalletIcon = ({ color, size }: { color: string; size: number }) => (
    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
        <Rect x="2" y="5" width="20" height="15" rx="2" stroke={color} strokeWidth="1.8" />
        <Path d="M2 10h20" stroke={color} strokeWidth="1.8" />
        <Circle cx="17" cy="15" r="1.5" fill={color} />
    </Svg>
);

const ToolIcon = ({ color, size }: { color: string; size: number }) => (
    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
        <Path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3-3a6 6 0 0 1-7 7l-6.4 6.4a2 2 0 1 1-2.8-2.8L10.9 10a6 6 0 0 1 7-7l-3.2 3.3z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </Svg>
);

const MessageIcon = ({ color, size }: { color: string; size: number }) => (
    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
        <Path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </Svg>
);

const Tab = createBottomTabNavigator();

export default function App() {
    return (
        <SafeAreaProvider>
            <NavigationContainer>
                <Tab.Navigator
                    initialRouteName='Home'
                    screenOptions={{
                        tabBarActiveTintColor: '#3498db',
                        tabBarInactiveTintColor: '#999',
                        tabBarStyle: {
                            backgroundColor: '#fff',
                            borderTopWidth: 1,
                            borderTopColor: '#e0e0e0',
                        },
                        headerStyle: { backgroundColor: '#3498db' },
                        headerTintColor: '#fff',
                        headerTitleStyle: { fontWeight: 'bold' },
                    }}
                >
                    <Tab.Screen
                        name="Home"
                        component={HomeScreen}
                        options={{
                            title: 'Wallets',
                            tabBarLabel: 'Wallets',
                            tabBarIcon: ({ color, size }) => <WalletIcon color={color} size={size} />,
                        }}
                    />
                    <Tab.Screen
                        name="Test"
                        component={TestScreen}
                        options={{
                            title: 'Test',
                            tabBarLabel: 'Test',
                            tabBarIcon: ({ color, size }) => <ToolIcon color={color} size={size} />,
                        }}
                    />
                    <Tab.Screen
                        name="Message"
                        component={MessageScreen}
                        options={{
                            title: 'Messages',
                            tabBarLabel: 'Messages',
                            tabBarIcon: ({ color, size }) => <MessageIcon color={color} size={size} />,
                        }}
                    />
                </Tab.Navigator>
            </NavigationContainer>
        </SafeAreaProvider>
    );
}