import type { ReactElement } from 'react';
import { Tabs } from 'expo-router';
import { Icon } from '@/components';
import type { IconName } from '@/components';
import { useTheme } from '@/theme';

// Open on Chats, not the leftmost (Contacts) tab.
export const unstable_settings = {
  initialRouteName: 'index',
};

const tabIcon =
  (name: IconName) =>
  ({ color, size }: { color: string; size: number }): ReactElement => (
    <Icon name={name} size={size} color={color} />
  );

// Persistent bottom navigation for the authenticated area: Contacts · Chats ·
// Settings. Chat/profile/group and modals live in the parent stack so they
// cover the tab bar when opened.
export default function TabsLayout(): ReactElement {
  const { colors } = useTheme();
  return (
    <Tabs
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: colors.accent,
        tabBarInactiveTintColor: colors.textMuted,
        tabBarStyle: {
          backgroundColor: colors.background,
          borderTopColor: colors.border,
        },
      }}
    >
      <Tabs.Screen
        name="contacts"
        options={{ title: 'Contacts', tabBarIcon: tabIcon('user') }}
      />
      <Tabs.Screen name="index" options={{ title: 'Chats', tabBarIcon: tabIcon('chats') }} />
      <Tabs.Screen
        name="settings"
        options={{ title: 'Settings', tabBarIcon: tabIcon('settings') }}
      />
    </Tabs>
  );
}