import { Tabs } from 'expo-router'
import React from 'react'
import { FontAwesome6, MaterialIcons } from '@expo/vector-icons'
import TabBar from '@/components/ui/TabBar'
import TabsHeader from '@/components/ui/TabsHeader'

export default function TabLayout() {
  return (
    <>
    <Tabs
      tabBar={(props) => <TabBar {...props} />}
      screenOptions={{
        tabBarHideOnKeyboard: true,
        header: (props) => <TabsHeader navProps={props} children={undefined} />,
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: 'Carte',
          headerShown: false,
          tabBarIcon: ({ color }) => <FontAwesome6 name="map-location-dot" size={24} color={color} />,
        }}
      />
      <Tabs.Screen
        name="challenges"
        options={{
          title: 'Défi en cours',
          headerShown: false,
          tabBarIcon: ({ color }) => <FontAwesome6 name="coins" size={24} color={color} />,
        }}
      />
      <Tabs.Screen
        name="train"
        options={{
          title: 'Trains',
          headerTitleStyle: {fontSize: 32},
          tabBarIcon: ({ color }) => <FontAwesome6 name="train" size={24} color={color} />,
        }}
      />
      <Tabs.Screen
        name="history"
        options={{
          title: 'Historique',
          headerTitleStyle: {fontSize: 32},
          tabBarIcon: ({ color }) => <MaterialIcons name="history" size={24} color={color} />,
        }}
      />
      <Tabs.Screen
        name="settings"
        options={{
          title: 'Paramètres',
          headerTitleStyle: {fontSize: 32},
          tabBarIcon: ({ color }) => <MaterialIcons name="settings" size={24} color={color} />,
        }}
      />
    </Tabs>
    </>
  )
}