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

import { HapticTab } from '@/components/haptic-tab';
import { IconSymbol } from '@/components/ui/icon-symbol';
import { Colors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme';

import { UnifiedBottomNav } from '@/components/home/UnifiedBottomNav';

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

  return (
    <Tabs
      tabBar={() => <UnifiedBottomNav />}
      screenOptions={{
        headerShown: false,
      }}>
      <Tabs.Screen
        name="index"
        options={{ title: 'Painel' }}
      />
      <Tabs.Screen
        name="explore"
        options={{ title: 'Explore' }}
      />
      <Tabs.Screen
        name="bookings"
        options={{ title: 'Serviços' }}
      />
      <Tabs.Screen
        name="wallet"
        options={{ title: 'Carteira' }}
      />
      <Tabs.Screen
        name="profile-settings"
        options={{ title: 'Configurações' }}
      />
      <Tabs.Screen
        name="chat"
        options={{ title: 'Chat' }}
      />
      <Tabs.Screen
        name="staff_booking/[id]"
        options={{ href: null }}
      />
    </Tabs>
  );
}