import { Button, Image, Text, View } from '@tarojs/components'
import { MainTab, switchMainTab } from '../services/tabNavigation'
import spirit from '../assets/home/spirit.png'
import './AppTabBar.scss'

export function AppTabBar({ active }: { active: MainTab }) {
  const navigate = (page: MainTab) => switchMainTab(page, active)
  return <View className='app-tabbar'>
    <Button className={`app-tabbar-item ${active === 'home' ? 'active' : ''}`} onClick={() => navigate('home')}>
      <View className='app-home-symbol'><View className='app-home-roof' /><View className='app-home-body'><View /></View></View>
      <Text className='app-tabbar-label'>首页</Text>
    </Button>
    <Button className={`app-tabbar-realm ${active === 'fortune' ? 'active' : ''}`} onClick={() => navigate('fortune')}>
      <View className='app-realm-symbol'><View className='app-spirit-frame'><Image className='app-spirit-image' src={spirit} mode='aspectFit' /></View></View>
      <Text className='app-tabbar-label'>天宫</Text>
    </Button>
    <Button className={`app-tabbar-item ${active === 'my' ? 'active' : ''}`} onClick={() => navigate('my')}>
      <View className='app-person-symbol'><View className='app-person-head' /><View className='app-person-body' /></View>
      <Text className='app-tabbar-label'>我的</Text>
    </Button>
  </View>
}