import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
import { Icon, Label, NativeTabs, VectorIcon } from 'expo-router/unstable-native-tabs';
import { useColorScheme } from 'react-native';

import { Colors } from '@/constants/theme';

const TABS: { name: string; label: string; icon: keyof typeof MaterialCommunityIcons.glyphMap }[] = [
  { name: 'index', label: 'Rutina', icon: 'dumbbell' },
  { name: 'evaluations', label: 'Evaluaciones', icon: 'scale-bathroom' },
  { name: 'avatar', label: 'Avatar', icon: 'trophy' },
  { name: 'social', label: 'Comunidad', icon: 'account-group' },
  { name: 'account', label: 'Perfil', icon: 'account-circle' },
];

export default function AppTabs() {
  const scheme = useColorScheme();
  const colors = Colors[scheme ?? 'light'];

  return (
    <NativeTabs
      backgroundColor={colors.background}
      indicatorColor={colors.backgroundElement}
      iconColor={colors.textSecondary}
      labelStyle={{ selected: { color: colors.text } }}>
      {TABS.map((tab) => (
        <NativeTabs.Trigger key={tab.name} name={tab.name}>
          <Label>{tab.label}</Label>
          <Icon
            src={<VectorIcon family={MaterialCommunityIcons} name={tab.icon} />}
            selectedColor={colors.tint}
          />
        </NativeTabs.Trigger>
      ))}
    </NativeTabs>
  );
}