booking form validation and data types

apps/web/components/BookingForm.tsx

@@ -1,16 +1,34 @@
 'use client'
 
-import React, { useState } from 'react';
-import { Calendar, Clock, User, Mail, Users } from 'lucide-react';
+import React, { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import BookingTypeSelector from './BookingTypeSelector';
+import DateSelector from './DateSelector';
+import TimeSlotSelector from './TimeSlotSelector';
+import CustomerDetails from './CustomerDetails';
+import BookingSummary from './BookingSummary';
+
+interface FormData {
+  customerName: string;
+  customerEmail: string;
+  participantsCount: number;
+}
 
 const BookingInterface = () => {
   const [selectedDate, setSelectedDate] = useState('');
   const [selectedTimeSlot, setSelectedTimeSlot] = useState('');
   const [selectedBookingType, setSelectedBookingType] = useState('');
-  const [customerName, setCustomerName] = useState('');
-  const [customerEmail, setCustomerEmail] = useState('');
   const [participantsCount, setParticipantsCount] = useState(1);
 
+  const { register, handleSubmit, formState: { errors, isValid }, setValue, trigger } = useForm<FormData>({
+    mode: 'onChange',
+    defaultValues: {
+      customerName: '',
+      customerEmail: '',
+      participantsCount: 1
+    }
+  });
+
   // Mock data - will be replaced with API calls
   const bookingTypes = [
     { id: '1', name: 'wheel_rental', display_name: 'Wheel Rental', requires_payment: false, price_per_person: 0 },
@@ -30,35 +48,44 @@ const BookingInterface = () => {
 
   const selectedBookingTypeData = bookingTypes.find(bt => bt.id === selectedBookingType);
 
-  const handleSubmit = () => {
-    console.log({
-      selectedBookingType,
-      selectedDate,
-      selectedTimeSlot,
-      customerName,
-      customerEmail,
-      participantsCount
-    });
-  };
+  useEffect(() => {
+    setValue('participantsCount', participantsCount);
+    trigger('participantsCount');
+  }, [participantsCount, setValue, trigger]);
 
-  const generateCalendarDays = () => {
-    const today = new Date();
-    const days = [];
+  const onSubmit = (data: FormData) => {
+    const selectedTimeSlotData = timeSlots.find(slot => slot.id === selectedTimeSlot);
     
-    for (let i = 0; i < 14; i++) {
-      const date = new Date(today);
-      date.setDate(today.getDate() + i);
-      days.push({
-        date: date.toISOString().split('T')[0],
-        day: date.getDate(),
-        month: date.toLocaleDateString('en', { month: 'short' }),
-        dayName: date.toLocaleDateString('en', { weekday: 'short' })
-      });
-    }
-    return days;
+    const formData = {
+      bookingTypeId: selectedBookingType,
+      customerName: data.customerName,
+      customerEmail: data.customerEmail,
+      startTime: selectedDate && selectedTimeSlotData 
+        ? `${selectedDate}T${selectedTimeSlotData.start_time}:00`
+        : '',
+      endTime: selectedDate && selectedTimeSlotData 
+        ? `${selectedDate}T${selectedTimeSlotData.end_time}:00`
+        : '',
+      participantsCount: data.participantsCount,
+    };
+    
+    console.log(formData);
   };
 
-  const calendarDays = generateCalendarDays();
+  const handleParticipantsCountChange = (count: number) => {
+    setParticipantsCount(count);
+  };
+
+  const handleBookingTypeChange = (typeId: string) => {
+    setSelectedBookingType(typeId);
+    setSelectedDate('');
+    setSelectedTimeSlot('');
+  };
+
+  const handleDateChange = (date: string) => {
+    setSelectedDate(date);
+    setSelectedTimeSlot('');
+  };
 
   return (
     <div className="min-h-screen bg-gray-50 p-4">
@@ -71,201 +98,53 @@ const BookingInterface = () => {
 
         <div className="space-y-8">
           {/* Booking Type Selection */}
-          <div className="bg-white rounded-xl p-6 shadow-sm">
-            <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
-              <Calendar className="w-5 h-5" />
-              Select Experience
-            </h2>
-            <div className="grid gap-3">
-              {bookingTypes.map((type) => (
-                <label key={type.id} className="cursor-pointer">
-                  <input
-                    type="radio"
-                    name="bookingType"
-                    value={type.id}
-                    checked={selectedBookingType === type.id}
-                    onChange={(e) => setSelectedBookingType(e.target.value)}
-                    className="sr-only"
-                  />
-                  <div className={`p-4 rounded-lg border-2 transition-all ${
-                    selectedBookingType === type.id 
-                      ? 'border-blue-500 bg-blue-50' 
-                      : 'border-gray-200 hover:border-gray-300'
-                  }`}>
-                    <div className="flex justify-between items-start">
-                      <div>
-                        <h3 className="font-medium text-gray-900">{type.display_name}</h3>
-                        {type.requires_payment && (
-                          <p className="text-sm text-gray-600 mt-1">
-                            ${type.price_per_person} per person
-                          </p>
-                        )}
-                      </div>
-                      {type.requires_payment && (
-                        <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">
-                          Payment Required
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                </label>
-              ))}
-            </div>
-          </div>
+          <BookingTypeSelector
+            bookingTypes={bookingTypes}
+            selectedBookingType={selectedBookingType}
+            onBookingTypeChange={handleBookingTypeChange}
+          />
 
           {/* Date Selection */}
           {selectedBookingType && (
-            <div className="bg-white rounded-xl p-6 shadow-sm">
-              <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
-                <Calendar className="w-5 h-5" />
-                Choose Date
-              </h2>
-              <div className="grid grid-cols-7 gap-2 md:gap-3">
-                {calendarDays.map((day) => (
-                  <button
-                    key={day.date}
-                    type="button"
-                    onClick={() => setSelectedDate(day.date)}
-                    className={`p-3 rounded-lg text-center transition-all ${
-                      selectedDate === day.date
-                        ? 'bg-blue-500 text-white'
-                        : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
-                    }`}
-                  >
-                    <div className="text-xs font-medium">{day.dayName}</div>
-                    <div className="text-sm font-semibold">{day.day}</div>
-                    <div className="text-xs">{day.month}</div>
-                  </button>
-                ))}
-              </div>
-            </div>
+            <DateSelector
+              selectedDate={selectedDate}
+              onDateChange={handleDateChange}
+            />
           )}
 
           {/* Time Slot Selection */}
           {selectedDate && (
-            <div className="bg-white rounded-xl p-6 shadow-sm">
-              <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
-                <Clock className="w-5 h-5" />
-                Available Times
-              </h2>
-              <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
-                {timeSlots.map((slot) => (
-                  <button
-                    key={slot.id}
-                    type="button"
-                    disabled={!slot.available}
-                    onClick={() => setSelectedTimeSlot(slot.id)}
-                    className={`p-3 rounded-lg text-center transition-all ${
-                      !slot.available
-                        ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
-                        : selectedTimeSlot === slot.id
-                        ? 'bg-blue-500 text-white'
-                        : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
-                    }`}
-                  >
-                    <div className="font-medium">
-                      {slot.start_time} - {slot.end_time}
-                    </div>
-                  </button>
-                ))}
-              </div>
-            </div>
+            <TimeSlotSelector
+              timeSlots={timeSlots}
+              selectedTimeSlot={selectedTimeSlot}
+              onTimeSlotChange={setSelectedTimeSlot}
+            />
           )}
 
           {/* Customer Details */}
           {selectedTimeSlot && (
-            <div className="bg-white rounded-xl p-6 shadow-sm">
-              <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
-                <User className="w-5 h-5" />
-                Your Details
-              </h2>
+            <form onSubmit={handleSubmit(onSubmit)}>
+              <CustomerDetails
+                register={register}
+                errors={errors}
+                participantsCount={participantsCount}
+                onParticipantsCountChange={handleParticipantsCountChange}
+              />
               
-              <div className="space-y-4">
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Full Name *
-                  </label>
-                  <input
-                    type="text"
-                    value={customerName}
-                    onChange={(e) => setCustomerName(e.target.value)}
-                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    placeholder="Enter your full name"
+              {/* Summary & Submit */}
+              {isValid && (
+                <div className="mt-8">
+                  <BookingSummary
+                    selectedBookingTypeData={selectedBookingTypeData}
+                    selectedDate={selectedDate}
+                    selectedTimeSlot={selectedTimeSlot}
+                    timeSlots={timeSlots}
+                    participantsCount={participantsCount}
+                    onSubmit={handleSubmit(onSubmit)}
                   />
                 </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Email Address *
-                  </label>
-                  <input
-                    type="email"
-                    value={customerEmail}
-                    onChange={(e) => setCustomerEmail(e.target.value)}
-                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    placeholder="Enter your email"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
-                    <Users className="w-4 h-4" />
-                    Number of Participants
-                  </label>
-                  <select
-                    value={participantsCount}
-                    onChange={(e) => setParticipantsCount(parseInt(e.target.value))}
-                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                  >
-                    {[1, 2, 3, 4, 5, 6, 7, 8].map(num => (
-                      <option key={num} value={num}>{num} participant{num > 1 ? 's' : ''}</option>
-                    ))}
-                  </select>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Summary & Submit */}
-          {selectedTimeSlot && customerName && customerEmail && (
-            <div className="bg-white rounded-xl p-6 shadow-sm">
-              <h2 className="text-xl font-semibold text-gray-900 mb-4">Booking Summary</h2>
-              
-              <div className="space-y-3 mb-6">
-                <div className="flex justify-between">
-                  <span className="text-gray-600">Experience:</span>
-                  <span className="font-medium">{selectedBookingTypeData?.display_name}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-gray-600">Date:</span>
-                  <span className="font-medium">{selectedDate}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-gray-600">Time:</span>
-                  <span className="font-medium">
-                    {timeSlots.find(s => s.id === selectedTimeSlot)?.start_time} - 
-                    {timeSlots.find(s => s.id === selectedTimeSlot)?.end_time}
-                  </span>
-                </div>
-                <div className="flex justify-between">
-                  <span className="text-gray-600">Participants:</span>
-                  <span className="font-medium">{participantsCount}</span>
-                </div>
-                {selectedBookingTypeData?.requires_payment && (
-                  <div className="flex justify-between text-lg font-semibold border-t pt-3">
-                    <span>Total:</span>
-                    <span>${selectedBookingTypeData.price_per_person * participantsCount}</span>
-                  </div>
-                )}
-              </div>
-
-              <button
-                onClick={handleSubmit}
-                className="w-full bg-blue-600 text-white py-4 px-6 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
-              >
-                {selectedBookingTypeData?.requires_payment ? 'Continue to Payment' : 'Confirm Booking'}
-              </button>
-            </div>
+              )}
+            </form>
           )}
         </div>
       </div>

apps/web/components/BookingSummary.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+interface BookingType {
+  id: string;
+  name: string;
+  display_name: string;
+  requires_payment: boolean;
+  price_per_person: number;
+}
+
+interface TimeSlot {
+  id: string;
+  start_time: string;
+  end_time: string;
+  available: boolean;
+}
+
+interface BookingSummaryProps {
+  selectedBookingTypeData: BookingType | undefined;
+  selectedDate: string;
+  selectedTimeSlot: string;
+  timeSlots: TimeSlot[];
+  participantsCount: number;
+  onSubmit: () => void;
+}
+
+const BookingSummary: React.FC<BookingSummaryProps> = ({
+  selectedBookingTypeData,
+  selectedDate,
+  selectedTimeSlot,
+  timeSlots,
+  participantsCount,
+  onSubmit,
+}) => {
+  const selectedTimeSlotData = timeSlots.find(s => s.id === selectedTimeSlot);
+
+  return (
+    <div className="bg-white rounded-xl p-6 shadow-sm">
+      <h2 className="text-xl font-semibold text-gray-900 mb-4">Booking Summary</h2>
+      
+      <div className="space-y-3 mb-6">
+        <div className="flex justify-between">
+          <span className="text-gray-600">Experience:</span>
+          <span className="font-medium">{selectedBookingTypeData?.display_name}</span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-gray-600">Date:</span>
+          <span className="font-medium">{selectedDate}</span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-gray-600">Time:</span>
+          <span className="font-medium">
+            {selectedTimeSlotData?.start_time} - {selectedTimeSlotData?.end_time}
+          </span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-gray-600">Participants:</span>
+          <span className="font-medium">{participantsCount}</span>
+        </div>
+        {selectedBookingTypeData?.requires_payment && (
+          <div className="flex justify-between text-lg font-semibold border-t pt-3">
+            <span>Total:</span>
+            <span>₾{selectedBookingTypeData.price_per_person * participantsCount}</span>
+          </div>
+        )}
+      </div>
+
+      <button
+        onClick={onSubmit}
+        className="w-full bg-blue-600 text-white py-4 px-6 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
+      >
+        {selectedBookingTypeData?.requires_payment ? 'Continue to Payment' : 'Confirm Booking'}
+      </button>
+    </div>
+  );
+};
+
+export default BookingSummary;

apps/web/components/BookingTypeSelector.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Calendar } from 'lucide-react';
+
+interface BookingType {
+  id: string;
+  name: string;
+  display_name: string;
+  requires_payment: boolean;
+  price_per_person: number;
+}
+
+interface BookingTypeSelectorProps {
+  bookingTypes: BookingType[];
+  selectedBookingType: string;
+  onBookingTypeChange: (typeId: string) => void;
+}
+
+const BookingTypeSelector: React.FC<BookingTypeSelectorProps> = ({
+  bookingTypes,
+  selectedBookingType,
+  onBookingTypeChange,
+}) => {
+  return (
+    <div className="bg-white rounded-xl p-6 shadow-sm">
+      <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
+        <Calendar className="w-5 h-5" />
+        Select Experience
+      </h2>
+      <div className="grid gap-3">
+        {bookingTypes.map((type) => (
+          <label key={type.id} className="cursor-pointer">
+            <input
+              type="radio"
+              name="bookingType"
+              value={type.id}
+              checked={selectedBookingType === type.id}
+              onChange={(e) => onBookingTypeChange(e.target.value)}
+              className="sr-only"
+            />
+            <div className={`p-4 rounded-lg border-2 transition-all ${
+              selectedBookingType === type.id 
+                ? 'border-blue-500 bg-blue-50' 
+                : 'border-gray-200 hover:border-gray-300'
+            }`}>
+              <div className="flex justify-between items-start">
+                <div>
+                  <h3 className="font-medium text-gray-900">{type.display_name}</h3>
+                  {type.requires_payment && (
+                    <p className="text-sm text-gray-600 mt-1">
+                      ${type.price_per_person} per person
+                    </p>
+                  )}
+                </div>
+                {type.requires_payment && (
+                  <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">
+                    Payment Required
+                  </span>
+                )}
+              </div>
+            </div>
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default BookingTypeSelector;

apps/web/components/CustomerDetails.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { User, Users } from 'lucide-react';
+import { UseFormRegister, FieldErrors } from 'react-hook-form';
+
+interface FormData {
+  customerName: string;
+  customerEmail: string;
+  participantsCount: number;
+}
+
+interface CustomerDetailsProps {
+  register: UseFormRegister<FormData>;
+  errors: FieldErrors<FormData>;
+  participantsCount: number;
+  onParticipantsCountChange: (count: number) => void;
+}
+
+const CustomerDetails: React.FC<CustomerDetailsProps> = ({
+  register,
+  errors,
+  participantsCount,
+  onParticipantsCountChange,
+}) => {
+  return (
+    <div className="bg-white rounded-xl p-6 shadow-sm">
+      <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
+        <User className="w-5 h-5" />
+        Your Details
+      </h2>
+      
+      <div className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Full Name *
+          </label>
+          <input
+            type="text"
+            {...register('customerName', { 
+              required: 'Full name is required',
+              minLength: { value: 2, message: 'Name must be at least 2 characters' }
+            })}
+            className={`w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+              errors.customerName ? 'border-red-300' : 'border-gray-300'
+            }`}
+            placeholder="Enter your full name"
+          />
+          {errors.customerName && (
+            <p className="text-red-500 text-sm mt-1">{errors.customerName.message}</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Email Address *
+          </label>
+          <input
+            type="email"
+            {...register('customerEmail', { 
+              required: 'Email address is required',
+              pattern: {
+                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                message: 'Please enter a valid email address'
+              }
+            })}
+            className={`w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+              errors.customerEmail ? 'border-red-300' : 'border-gray-300'
+            }`}
+            placeholder="Enter your email"
+          />
+          {errors.customerEmail && (
+            <p className="text-red-500 text-sm mt-1">{errors.customerEmail.message}</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
+            <Users className="w-4 h-4" />
+            Number of Participants
+          </label>
+          <div className="flex items-center justify-center bg-gray-100 rounded-lg p-1 max-w-xs">
+            <button
+              type="button"
+              onClick={() => onParticipantsCountChange(Math.max(1, participantsCount - 1))}
+              className="w-12 h-12 flex items-center justify-center rounded-lg bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-800 transition-colors"
+              disabled={participantsCount <= 1}
+            >
+              <span className="text-xl font-medium">−</span>
+            </button>
+            <div className="flex-1 text-center px-4">
+              <span className="text-xl font-semibold text-gray-900">{participantsCount}</span>
+              <div className="text-xs text-gray-500">participant{participantsCount > 1 ? 's' : ''}</div>
+            </div>
+            <button
+              type="button"
+              onClick={() => onParticipantsCountChange(Math.min(8, participantsCount + 1))}
+              className="w-12 h-12 flex items-center justify-center rounded-lg bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-800 transition-colors"
+              disabled={participantsCount >= 8}
+            >
+              <span className="text-xl font-medium">+</span>
+            </button>
+          </div>
+          <input
+            type="hidden"
+            {...register('participantsCount', { 
+              min: { value: 1, message: 'At least 1 participant required' },
+              max: { value: 8, message: 'Maximum 8 participants allowed' }
+            })}
+            value={participantsCount}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CustomerDetails;

apps/web/components/DateSelector.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Calendar } from 'lucide-react';
+
+interface CalendarDay {
+  date: string;
+  day: number;
+  month: string;
+  dayName: string;
+}
+
+interface DateSelectorProps {
+  selectedDate: string;
+  onDateChange: (date: string) => void;
+}
+
+const DateSelector: React.FC<DateSelectorProps> = ({
+  selectedDate,
+  onDateChange,
+}) => {
+  const generateCalendarDays = (): CalendarDay[] => {
+    const today = new Date();
+    const days = [];
+    
+    for (let i = 0; i < 14; i++) {
+      const date = new Date(today);
+      date.setDate(today.getDate() + i);
+      days.push({
+        date: date.toISOString().split('T')[0],
+        day: date.getDate(),
+        month: date.toLocaleDateString('en', { month: 'short' }),
+        dayName: date.toLocaleDateString('en', { weekday: 'short' })
+      });
+    }
+    return days;
+  };
+
+  const calendarDays = generateCalendarDays();
+
+  return (
+    <div className="bg-white rounded-xl p-6 shadow-sm">
+      <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
+        <Calendar className="w-5 h-5" />
+        Choose Date
+      </h2>
+      <div className="grid grid-cols-7 gap-2 md:gap-3">
+        {calendarDays.map((day) => (
+          <button
+            key={day.date}
+            type="button"
+            onClick={() => onDateChange(day.date)}
+            className={`p-3 rounded-lg text-center transition-all ${
+              selectedDate === day.date
+                ? 'bg-blue-500 text-white'
+                : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
+            }`}
+          >
+            <div className="text-xs font-medium">{day.dayName}</div>
+            <div className="text-sm font-semibold">{day.day}</div>
+            <div className="text-xs">{day.month}</div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default DateSelector;

apps/web/components/TimeSlotSelector.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Clock } from 'lucide-react';
+
+interface TimeSlot {
+  id: string;
+  start_time: string;
+  end_time: string;
+  available: boolean;
+}
+
+interface TimeSlotSelectorProps {
+  timeSlots: TimeSlot[];
+  selectedTimeSlot: string;
+  onTimeSlotChange: (slotId: string) => void;
+}
+
+const TimeSlotSelector: React.FC<TimeSlotSelectorProps> = ({
+  timeSlots,
+  selectedTimeSlot,
+  onTimeSlotChange,
+}) => {
+  return (
+    <div className="bg-white rounded-xl p-6 shadow-sm">
+      <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
+        <Clock className="w-5 h-5" />
+        Available Times
+      </h2>
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+        {timeSlots.map((slot) => (
+          <button
+            key={slot.id}
+            type="button"
+            disabled={!slot.available}
+            onClick={() => onTimeSlotChange(slot.id)}
+            className={`p-3 rounded-lg text-center transition-all ${
+              !slot.available
+                ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                : selectedTimeSlot === slot.id
+                ? 'bg-blue-500 text-white'
+                : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
+            }`}
+          >
+            <div className="font-medium">
+              {slot.start_time} - {slot.end_time}
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TimeSlotSelector;