import { NativeTabs } from 'expo-router/unstable-native-tabs';

export default function AppTabs() {
  return (
    <NativeTabs
      backgroundColor="#09090b"
      iconColor={{ default: 'rgba(255,255,255,0.54)', selected: '#ffffff' }}
      indicatorColor="rgba(255,255,255,0.12)"
      labelStyle={{
        default: { color: 'rgba(255,255,255,0.54)', fontSize: 11, fontWeight: '800' },
        selected: { color: '#ffffff', fontSize: 11, fontWeight: '900' },
      }}>
      <NativeTabs.Trigger name="index">
        <NativeTabs.Trigger.Label>刷剧</NativeTabs.Trigger.Label>
        <NativeTabs.Trigger.Icon
          sf={{ default: 'play.rectangle', selected: 'play.rectangle.fill' }}
          md={{ default: 'slideshow', selected: 'slideshow' }}
        />
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="create">
        <NativeTabs.Trigger.Label>创作</NativeTabs.Trigger.Label>
        <NativeTabs.Trigger.Icon
          sf={{ default: 'wand.and.stars', selected: 'wand.and.stars.inverse' }}
          md={{ default: 'auto_fix_high', selected: 'auto_fix_high' }}
        />
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="profile">
        <NativeTabs.Trigger.Label>我的</NativeTabs.Trigger.Label>
        <NativeTabs.Trigger.Icon
          sf={{ default: 'person.crop.circle', selected: 'person.crop.circle.fill' }}
          md={{ default: 'person', selected: 'person' }}
        />
      </NativeTabs.Trigger>
    </NativeTabs>
  );
}
