import { Tabs } from 'expo-router'
import React from 'react'

import { Colors } from '@/constants/Colors'
import { useColorScheme } from '@/hooks/useColorScheme'
import { FontAwesome6, MaterialIcons } from '@expo/vector-icons'

export default function TabLayout() {
  const colorScheme = useColorScheme()

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
      }}>
      <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>
  )
}