(node:232) [DEP_WEBPACK_DEV_SERVER_CONSTRUCTOR] DeprecationWarning: Using 'compiler' as the first argument is deprecated. Please use 'options' as the first argument and 'compiler' as the second argument.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:232) [DEP_WEBPACK_DEV_SERVER_LISTEN] DeprecationWarning: 'listen' is deprecated. Please use the async 'start' or 'startCallback' method.
› Press ? │ show all commands
ERROR in ./node_modules/expo-router/build/domComponents/useDomComponentNavigation.js:1Module not found: Can't resolve 'expo/dom/global'
> 1 | import { addGlobalDomEventListener } from 'expo/dom/global';
  2 | import React from 'react';
  3 |
  4 | import {

ERROR in ./node_modules/expo-router/build/global-state/routing.js:2
Module not found: Can't resolve 'expo/dom'
  1 | import { NavigationAction, type NavigationState, PartialRoute } from '@react-navigation/native';
> 2 | import { IS_DOM } from 'expo/dom';
  3 | import * as Linking from 'expo-linking';
  4 | import { Platform } from 'react-native';
  5 |

ERROR in Failed to find the instance of sharp used by the global sharp-cli package.   

web compiled with 3 errors
import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, FlatList, TextInput, ScrollView, KeyboardAvoidingView, Platform } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import CalendarPicker from 'react-native-calendar-picker';
import moment from 'moment';
import colors from '@/utils/colors';
import { useUser } from '@clerk/clerk-expo';
import Toast from 'react-native-toast-message';
import createBooking from '@/utils/globalApi';

interface BookingModalProps {
  onClose: () => void;
  businessId: string;
}

interface TimeSlot {
  time: string;
}

const getTimeSlots = (): TimeSlot[] => {
  const timeList: TimeSlot[] = [];
  for (let i = 8; i <= 12; i++) {
    timeList.push({ time: `${i}:00 AM` });
    timeList.push({ time: `${i}:30 AM` });
  }
  for (let i = 1; i <= 7; i++) {
    timeList.push({ time: `${i}:00 PM` });
    timeList.push({ time: `${i}:30 PM` });
  }
  return timeList;
};

const BookingModal: React.FC<BookingModalProps> = ({ onClose, businessId }) => {
  const { user } = useUser();
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
  const [selectedTime, setSelectedTime] = useState<string | null>(null);
  const [note, setNote] = useState('');
  const timeSlots = getTimeSlots();

  const handleConfirmBooking = async () => {
    if (!selectedDate || !selectedTime) {
      Toast.show({
        type: 'error',
        text1: 'Please select date and time',
      });
      return;
    }

    try {
      const data = {
        userName: user?.fullName,
        userEmail: user?.primaryEmailAddress?.emailAddress,
        date: moment(selectedDate).format('YYYY-MM-DD'),
        time: selectedTime,
        businessId: businessId,
      };

      const response = await createBooking(data);
      console.log('Booking response:', response);

      Toast.show({
        type: 'success',
        text1: 'Booking created successfully',
      });

      onClose();
    } catch (error) {
      console.error('Booking error:', error);
      Toast.show({
        type: 'error',
        text1: 'Failed to create booking',
      });
    }
  };

  return (
    <KeyboardAvoidingView 
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={styles.container}
    >
      <View style={styles.header}>
        <TouchableOpacity onPress={onClose}>
          <Ionicons name="arrow-back" size={30} color="#000" />
        </TouchableOpacity>
        <Text style={styles.headerText}>Book Appointment</Text>
      </View>

      <ScrollView style={styles.content}>
        <Text style={styles.sectionTitle}>Select Date</Text>
        <View style={styles.calendarContainer}>
          <CalendarPicker
            width={340}
            minDate={new Date()}
            todayBackgroundColor={colors.primary}
            todayTextStyle={{ color: colors.white }}
            selectedDayColor={colors.primary}
            selectedDayTextColor={colors.white}
            onDateChange={(date: Date) => setSelectedDate(date)}
          />
        </View>

        <Text style={styles.sectionTitle}>Select Time Slot</Text>
        <FlatList
          data={timeSlots}
          horizontal
          showsHorizontalScrollIndicator={false}
          renderItem={({ item }: { item: TimeSlot }) => (
            <TouchableOpacity
              style={[
                styles.timeSlot,
                selectedTime === item.time && styles.selectedTimeSlot
              ]}
              onPress={() => setSelectedTime(item.time)}
            >
              <Text style={[
                styles.timeSlotText,
                selectedTime === item.time && styles.selectedTimeSlotText
              ]}>
                {item.time}
              </Text>
            </TouchableOpacity>
          )}
          keyExtractor={(item: TimeSlot) => item.time}
          contentContainerStyle={styles.timeSlotsContainer}
        />

        <Text style={styles.sectionTitle}>Note or Suggestions</Text>
        <TextInput
          style={styles.noteTextArea}
          placeholder="Note"
          multiline
          numberOfLines={4}
          textAlignVertical="top"
          value={note}
          onChangeText={setNote}
        />

        <TouchableOpacity 
          style={styles.confirmButton}
          onPress={handleConfirmBooking}
        >
          <Text style={styles.confirmButtonText}>Confirm and Book</Text>
        </TouchableOpacity>
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 20,
    gap: 10,
  },
  headerText: {
    fontSize: 25,
    fontFamily: 'Outfit-Medium',
  },
  content: {
    padding: 20,
  },
  sectionTitle: {
    fontSize: 20,
    fontFamily: 'Outfit-Bold',
    marginBottom: 20,
  },
  calendarContainer: {
    backgroundColor: colors.primaryLight || colors.primary,
    padding: 20,
    borderRadius: 15,
    marginBottom: 30,
  },
  timeSlotsContainer: {
    gap: 10,
    paddingRight: 20,
  },
  timeSlot: {
    padding: 10,
    paddingHorizontal: 18,
    borderWidth: 1,
    borderColor: colors.primary,
    borderRadius: 99,
    marginRight: 10,
  },
  selectedTimeSlot: {
    backgroundColor: colors.primary,
  },
  timeSlotText: {
    fontFamily: 'Outfit-Regular',
    fontSize: 16,
    color: colors.primary,
  },
  selectedTimeSlotText: {
    color: colors.white,
  },
  noteTextArea: {
    borderWidth: 1,
    borderColor: colors.primary,
    borderRadius: 15,
    padding: 15,
    fontFamily: 'Outfit-Regular',
    fontSize: 16,
    minHeight: 100,
    textAlignVertical: 'top',
  },
  confirmButton: {
    backgroundColor: colors.primary,
    padding: 15,
    borderRadius: 99,
    marginTop: 20,
    elevation: 5,
  },
  confirmButtonText: {
    color: colors.white,
    fontFamily: 'Outfit-Medium',
    fontSize: 17,
    textAlign: 'center',
  },
});

export default BookingModal;