import { Tabs } from 'expo-router';
import { View } from 'react-native';

const NAV_BG = '#2d2d2d';
const ACTIVE_TINT = '#ea580c';
const INACTIVE_TINT = '#a1a1aa';

export default function TabsLayout() {
  return (
    <Tabs
      screenOptions={{
        headerStyle: { backgroundColor: NAV_BG },
        headerTintColor: '#ffffff',
        headerTitleStyle: { fontWeight: '600' },
        tabBarStyle: { backgroundColor: NAV_BG },
        tabBarActiveTintColor: ACTIVE_TINT,
        tabBarInactiveTintColor: INACTIVE_TINT,
        tabBarLabelStyle: { fontSize: 12 },
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarLabel: 'Home',
        }}
      />
      <Tabs.Screen
        name="scan"
        options={{
          title: 'Scan Invoice',
          tabBarLabel: 'Scan',
        }}
      />
      <Tabs.Screen
        name="proforma"
        options={{
          title: 'Proforma',
          tabBarLabel: 'Proforma',
        }}
      />
      <Tabs.Screen
        name="payments"
        options={{
          title: 'Payments',
          tabBarLabel: 'Payments',
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: 'Profile',
          tabBarLabel: 'Profile',
        }}
      />
    </Tabs>
  );
}