booking form validation and data types

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;