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

const COLORS = {
  background: '#121416',
  surface: '#1e2022',
  primary: '#fefcff',
  text: '#e2e2e5',
  textMuted: '#c5c6cd',
};

export default function AppTabs() {
  return (
    <NativeTabs
      backgroundColor={COLORS.background}
      indicatorColor={COLORS.surface}
      labelStyle={{ selected: { color: COLORS.primary }, unselected: { color: COLORS.textMuted } }}>
      <NativeTabs.Trigger name="index">
        <NativeTabs.Trigger.Label>Dashboard</NativeTabs.Trigger.Label>
        <NativeTabs.Trigger.Icon
          src={require('@/assets/images/tabIcons/home.png')}
          renderingMode="template"
        />
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="settings">
        <NativeTabs.Trigger.Label>Settings</NativeTabs.Trigger.Label>
        <NativeTabs.Trigger.Icon
          src={require('@/assets/images/tabIcons/explore.png')}
          renderingMode="template"
        />
      </NativeTabs.Trigger>
    </NativeTabs>
  );
}