import { View,Text } from '@tarojs/components'
import './index.scss'
import { useTranslation } from 'react-i18next'
import Taro from '@tarojs/taro'

export default function TabBar() {
    const { t } = useTranslation()

    function switchTab(index: number) {
        switch (index) {
            case 0:
                Taro.switchTab({
                    url: '/pages/Clock'
                })
                break;
            case 1:
                Taro.switchTab({
                    url: '/pages/Metric'
                })
                break;
            case 2:
                Taro.switchTab({
                    url: '/pages/Activity'
                })
                break;
            case 3:
                Taro.switchTab({
                    url: '/pages/Profile'
                })
                break;
        }
    }
    return (
        <View className='tabbar'>
            <View className='tabbar-item' onClick={()=>switchTab(0)}>
                <Text>{t('feature.tabbar.clock')}</Text>
            </View>
            <View className='tabbar-item'  onClick={()=>switchTab(1)}>

                <Text>{t('feature.tabbar.metric')}</Text>
            </View>
            <View className='tabbar-item' onClick={()=>switchTab(2)}>

                <Text>{t('feature.tabbar.activity')}</Text>
            </View>
            <View className='tabbar-item' onClick={()=>switchTab(3)}>
                <Text>{t('feature.tabbar.profile')}</Text>
            </View>
        </View>
    )
}