import '../global.css';
import { Tabs } from 'expo-router';
import { Home, Clock, FileText, Zap, CalendarIcon } from 'lucide-react-native';

export default function AppLayout() {
  return (
    <Tabs
      screenOptions={{
        headerShown: false,
        tabBarStyle: {
          backgroundColor: '#ffffff',
          borderTopWidth: 1,
          borderTopColor: '#f3f4f6',
          height: 80,
          paddingBottom: 20,
          paddingTop: 10,
        },
        tabBarActiveTintColor: '#099499',
        tabBarInactiveTintColor: '#9ca3af',
        tabBarLabelStyle: {
            fontSize: 10,
            fontWeight: '600',
            marginTop: 4
        }
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color, size }) => <Home color={color} size={24} />,
        }}
      />
      <Tabs.Screen
        name="attendance/index"
        options={{
          title: 'Presenze',
          tabBarIcon: ({ color, size }) => <Clock color={color} size={24} />,
        }}
      />
      <Tabs.Screen
        name="permits/index"
        options={{
          title: 'Permessi',
          tabBarIcon: ({ color, size }) => <CalendarIcon color={color} size={24} />,
        }}
      />
      <Tabs.Screen
        name="documents/index"
        options={{
          title: 'Moduli',
          tabBarIcon: ({ color, size }) => <FileText color={color} size={24} />,
        }}
      />
      <Tabs.Screen
        name="automation/index"
        options={{
          title: 'Domotica',
          tabBarIcon: ({ color, size }) => <Zap color={color} size={24} />,
        }}
      />
    </Tabs>
  );
}