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

export default function TabLayout() {
  return (
    <Tabs tabBar={(props) => <TabBar {...props} />}>
      <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: 'Challenges',
          headerTitleStyle: {fontSize: 32},
          tabBarIcon: ({ color }) => <FontAwesome6 name="coins" size={24} color={color} />,
        }}
      />
      <Tabs.Screen
        name="train"
        options={{
          title: 'Ajouter un trajet',
          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>
  )
}