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

import { Platform } from 'react-native';

import Svg, { Path } from 'react-native-svg';
import {TabAccountIcon, TabChargingIcon, TabHomeIcon } from '../../../component/global/SVG';


export default function TabLayout() {
    return (
        <Tabs
            screenOptions={{
                headerShown: false,
                tabBarLabelStyle: {
                    fontSize: 16,
                    marginBottom: Platform.OS === 'ios' ? 0 : 25
                },
                tabBarStyle: {
                    height: 100
                }
            }}
        >
            <Tabs.Screen
                name="(home)"
                options={{
                    title: '主頁',
                    tabBarHideOnKeyboard: true,
                    tabBarIcon: ({ focused }) => (
                        <TabHomeIcon color={focused ? '#02677D' : '#BBBBBB'} />
                    )
                }}
            />
            <Tabs.Screen
                name="(charging)/index"
                options={{
                    title: '充電',
                    tabBarHideOnKeyboard: true,
                    tabBarIcon: ({ focused }) => (
                        <TabChargingIcon color={focused ? '#02677D' : '#BBBBBB'} />
                    )
                }}
            />
            <Tabs.Screen
                name="(account)/index"
                options={{
                    title: '帳戶',
                    tabBarHideOnKeyboard: true,
                    tabBarIcon: ({ focused, color }) => (
                        <TabAccountIcon color={focused ? '#02677D' : '#BBBBBB'} />
                    )
                }}
            />
        </Tabs>
    );
}