import React from 'react';
import { Tabs } from 'expo-router';
import { Dimensions, Platform } from 'react-native';
import {
    TabAccountIcon,
    TabChargingIcon,
    TabHomeIcon
} from '../../../component/global/SVG';

export default function TabLayout() {
    const { height } = Dimensions.get('window');

    // Calculate marginBottom based on screen height
    const calculateMarginBottom = () => {
        if (Platform.OS === 'ios') return 0;
        if (height < 600) return 0;
        return 15;
    };

    return (
        <Tabs
            screenOptions={{
                headerShown: false,
                tabBarLabelStyle: {
                    fontSize: 16,
                    marginBottom: calculateMarginBottom()
                },
                tabBarStyle: {
                    height: height * 0.105
                },
                tabBarIconStyle: {
                    width: 10,
                    height: 10
                }
            }}
        >
            <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)"
                options={{
                    title: '帳戶',
                    tabBarHideOnKeyboard: true,
                    tabBarIcon: ({ focused, color }) => (
                        <TabAccountIcon
                            color={focused ? '#02677D' : '#BBBBBB'}
                        />
                    )
                }}
            />
        </Tabs>
    );
}