related-ui-components 2.7.5 → 2.7.7

package/src/components/TravelBooking/TravelBooking.tsx

@@ -1,407 +1,407 @@
-// src/components/TravelBooking.tsx (or wherever TravelBooking is)
-import React, { useState, useCallback, useMemo, useEffect } from "react";
-import { View, StyleSheet, StyleProp, ViewStyle, TextStyle } from "react-native"; // Import style types
-import TabSelector, { TabSelectorProps } from "./TabSelector"; // Adjust import path
-import FlightForm, { FlightFormProps } from "./FlightForm"; // Adjust import path
-import HotelForm, { HotelFormProps } from "./HotelForm"; // Adjust import path
-import CarRentalForm, {
-  CarRentalFormProps,
-  mockCarSuggestions,
-} from "./CarRentalForm"; // Adjust import path
-import { ThemeType, useTheme } from "../../theme"; // Adjust import path
-import SummaryBar, {
-  SelectionCallbackDataType,
-  SummaryBarProps,
-} from "./SummaryBar"; // Adjust import path
-import {
-  FlightSuggestions,
-  FormInputType,
-  HotelSuggestions,
-  CarSuggestions,
-} from "./types"; // Adjust import path
-import { FlightSelection, FlightSummaryProps } from "./FlightSummary";
-import { HotelSummaryProps, RoomState } from "./HotelSummary";
-
-// Define the possible tab names (can be overridden via props)
-type DefaultBookingType = "Flights" | "Hotels" | "Car Rentals";
-const DEFAULT_TABS: DefaultBookingType[] = ["Flights", "Hotels", "Car Rentals"];
-
-// Mock Data (Keep accessible for potential defaults)
-const DEFAULT_MOCK_FLIGHT_SUGGESTIONS: FlightSuggestions[] = [
-  {
-    id: 1,
-    city: "London",
-    value: "London, United Kingdom",
-    airports: [
-      "Heathrow Airport (LHR)",
-      "Gatwick Airport (LGW)",
-      "Stansted Airport (STN)",
-    ],
-  },
-  {
-    id: 2,
-    city: "New York",
-    value: "New York, USA",
-    airports: [
-      "John F. Kennedy Intl (JFK)",
-      "LaGuardia Airport (LGA)",
-      "Newark Liberty Intl (EWR)",
-    ],
-  },
-];
-const DEFAULT_MOCK_HOTEL_SUGGESTIONS: HotelSuggestions[] = [
-  { id: 1, city: "Beirut", country: "Lebanon", value: "BEIRUT, LEBANON" },
-  {
-    id: 2,
-    city: "Dubai",
-    country: "United Arab Emirates",
-    value: "DUBAI, UNITED ARAB EMIRATES",
-  },
-];
-const DEFAULT_MOCK_CAR_SUGGESTIONS: CarSuggestions[] = mockCarSuggestions;
-
-// --- TravelBooking Props Interface ---
-export interface TravelBookingProps {
-  /** Array of tab names. Defaults to ['Flights', 'Hotels', 'Car Rentals'] */
-  tabs?: string[];
-  /** The initially selected tab. Defaults to the first tab in the `tabs` array. */
-  initialTab?: string;
-  /** Callback when the selected tab changes */
-  onTabChange?: (tab: string) => void;
-  /** Callback when the search button is pressed in any form */
-  onSearch?: (details: any) => void;
-  /** Callback when any form input gains focus */
-  onInputFocus?: (input: FormInputType) => void;
-  /** Callback when text changes in location inputs */
-  onTextChange?: (text: string) => void;
-
-  /** Initial selection state for FlightSummary (if mode is 'flight') */
-  initialFlightSelection?: FlightSelection;
-  /** Initial selection state for HotelSummary (if mode is 'hotel') */
-  initialHotelSelection?: RoomState[];
-  /** Callback when the selection in SummaryBar changes */
-  onSummarySelectionChange?: (selection: SelectionCallbackDataType) => void;
-
-  /** Suggestion data for FlightForm */
-  flightSuggestionData?: FlightSuggestions[];
-  /** Suggestion data for HotelForm */
-  hotelSuggestionData?: HotelSuggestions[];
-  /** Suggestion data for CarRentalForm */
-  carSuggestionData?: CarSuggestions[];
-
-  // --- Common Style Props ---
-  /** Style for the root container of each form */
-  formContainerStyle?: StyleProp<ViewStyle>;
-  /** Style for input labels */
-  labelStyle?: StyleProp<TextStyle>;
-  /** Style for the CustomInput's TextInput component */
-  inputStyle?: StyleProp<ViewStyle>; // Renamed from commonInputStyle for clarity
-  /** Style for the touchable wrapper around date displays (if applicable) */
-  inputTouchableStyle?: StyleProp<ViewStyle>;
-  /** Style for the text inside inputs or date displays */
-  inputTextStyle?: StyleProp<TextStyle>;
-  /** Style for the container holding the date picker(s) and search button */
-  dateSearchRowStyle?: StyleProp<ViewStyle>;
-  /** Style for the individual date display groups within DateRangePicker */
-  dateInputGroupStyle?: StyleProp<ViewStyle>;
-  /** Style for the search button */
-  searchButtonStyle?: StyleProp<ViewStyle>;
-  /** Style for the search icon */
-  searchIconStyle?: StyleProp<TextStyle>;
-  /** Theme overrides for the calendar component */
-  calendarThemeOverrides?: object;
-  /** Style for the container wrapping the calendar modal/view */
-  calendarContainerStyle?: StyleProp<ViewStyle>;
-  /** Style for the container wrapping the swap button (Flights/Cars) */
-  swapButtonContainerStyle?: StyleProp<ViewStyle>;
-  /** Style for the swap button itself (Flights/Cars) */
-  swapButtonStyle?: StyleProp<ViewStyle>;
-  /** Style for the swap icon (Flights/Cars) */
-  swapIconStyle?: StyleProp<TextStyle>;
-  /** Style for the container wrapping the input fields (Flights/Cars) */
-  inputGroupContainerStyle?: StyleProp<ViewStyle>; // Added for consistency
-
-  // --- Nested Props for Child Components ---
-
-  /** Props to pass down to the TabSelector component */
-  tabSelectorProps?: Omit<
-    TabSelectorProps,
-    "tabs" | "initialTab" | "onTabChange" // Controlled by TravelBooking
-  >;
-
-  /** Props to pass down to the SummaryBar component */
-  summaryBarProps?: Omit<
-    SummaryBarProps,
-    | "mode"
-    | "initialSelection"
-    | "onSelectionChange"
-    | "flightProps"
-    | "hotelProps" // Controlled or derived by TravelBooking
-  >;
-
-  /** Props to pass down to the FlightSummary component (via SummaryBar) */
-  flightSummaryProps?: Omit<
-    FlightSummaryProps,
-    "selection" | "onSelectionChange" // Controlled by SummaryBar/TravelBooking
-  >;
-
-  /** Props to pass down to the HotelSummary component (via SummaryBar) */
-  hotelSummaryProps?: Omit<
-    HotelSummaryProps,
-    "selection" | "onSelectionChange" // Controlled by SummaryBar/TravelBooking
-  >;
-
-  /** Props to pass down to the FlightForm component */
-  /** Props to pass down to the FlightForm component */
-  flightFormProps?: Omit<
-    FlightFormProps,
-    "isOneWay" | "onSearchPress" | "onInputFocus" | "suggestionData" | "onTextChange" // Controlled or derived by TravelBooking
-  >;
-
-  /** Props to pass down to the HotelForm component */
-  hotelFormProps?: Omit<
-    HotelFormProps,
-    "onSearchPress" | "onInputFocus" | "suggestionData" | "onTextChange" // Controlled by TravelBooking
-  >;
-
-  /** Props to pass down to the CarRentalForm component */
-  carRentalFormProps?: Omit<
-    CarRentalFormProps,
-    "onSearchPress" | "onInputFocus" | "suggestionData" | "onTextChange"// Controlled by TravelBooking
-  >;
-}
-
-// --- TravelBooking Component Implementation ---
-const TravelBooking: React.FC<TravelBookingProps> = ({
-  tabs = DEFAULT_TABS,
-  initialTab,
-  onTabChange,
-  onSearch,
-  initialFlightSelection,
-  initialHotelSelection,
-  onSummarySelectionChange,
-  flightSuggestionData = DEFAULT_MOCK_FLIGHT_SUGGESTIONS, // Provide defaults
-  hotelSuggestionData = DEFAULT_MOCK_HOTEL_SUGGESTIONS, // Provide defaults
-  carSuggestionData = DEFAULT_MOCK_CAR_SUGGESTIONS, // Provide defaults
-  tabSelectorProps,
-  summaryBarProps,
-  flightFormProps,
-  hotelFormProps,
-  carRentalFormProps,
-  onInputFocus,
-  onTextChange,
-  // Destructure common style props
-  formContainerStyle,
-  labelStyle,
-  inputStyle,
-  inputTouchableStyle,
-  inputTextStyle,
-  dateSearchRowStyle,
-  dateInputGroupStyle,
-  searchButtonStyle,
-  searchIconStyle,
-  calendarThemeOverrides,
-  calendarContainerStyle,
-  swapButtonContainerStyle,
-  swapButtonStyle,
-  swapIconStyle,
-  inputGroupContainerStyle, // Added
-}) => {
-  const { theme } = useTheme();
-  const styles = useMemo(() => themedStyles(theme), [theme]);
-
-  const actualInitialTab = useMemo(
-    () => initialTab ?? (tabs.length > 0 ? tabs[0] : ""),
-    [initialTab, tabs]
-  );
-
-  const [selectedTab, setSelectedTab] = useState<string>(actualInitialTab);
-  const [selectedOptions, setSelectedOptions] = useState<
-    SelectionCallbackDataType | undefined
-  >(
-    actualInitialTab === tabs[0] && tabs[0] === "Flights"
-      ? initialFlightSelection
-      : actualInitialTab === tabs[1] && tabs[1] === "Hotels"
-      ? initialHotelSelection
-      : undefined
-  );
-
-  // --- Handlers ---
-  const handleTabChange = useCallback(
-    (tab: string) => {
-      setSelectedTab(tab);
-      if (tab === "Flights") {
-        setSelectedOptions(initialFlightSelection);
-      } else if (tab === "Hotels") {
-        setSelectedOptions(initialHotelSelection);
-      } else {
-        setSelectedOptions(undefined);
-      }
-      onTabChange?.(tab);
-    },
-    [onTabChange, initialFlightSelection, initialHotelSelection]
-  );
-
-  const handleInternalSummarySelectionChange = useCallback(
-    (selection: SelectionCallbackDataType) => {
-      setSelectedOptions(selection);
-      onSummarySelectionChange?.(selection);
-    },
-    [onSummarySelectionChange]
-  );
-
-  const handleInternalSearch = useCallback(
-    (details: any) => {
-      console.log("Internal Search Triggered:", details);
-      onSearch?.(details);
-    },
-    [onSearch]
-  );
-
-  const handleInternalTextChange = useCallback(
-    (text: string) => {
-      onTextChange?.(text);
-    },
-    [onTextChange] // Added dependency
-  );
-
-  const handleInternalInputFocus = useCallback(
-    (input: FormInputType) => {
-      console.log("Input Focused:", input);
-      onInputFocus?.(input);
-    },
-    [onInputFocus] // Added dependency
-  );
-
-  // Determine SummaryBar mode
-  const summaryBarMode = useMemo(() => {
-    if (selectedTab === "Flights") return "flight";
-    if (selectedTab === "Hotels") return "hotel";
-    return undefined;
-  }, [selectedTab]);
-
-  // --- Render Content Logic ---
-  const renderContent = () => {
-    const commonFormProps = {
-      containerStyle: formContainerStyle,
-      labelStyle: labelStyle,
-      inputStyle: inputStyle,
-      inputTouchableStyle: inputTouchableStyle,
-      inputTextStyle: inputTextStyle,
-      dateInputGroupStyle: dateInputGroupStyle,
-      searchButtonStyle: searchButtonStyle,
-      searchIconStyle: searchIconStyle,
-      calendarThemeOverrides: calendarThemeOverrides,
-      calendarContainerStyle: calendarContainerStyle,
-    };
-
-    switch (selectedTab) {
-      case "Flights": {
-        let isOneWay = false;
-        if (
-          selectedOptions &&
-          typeof selectedOptions === "object" &&
-          !Array.isArray(selectedOptions) &&
-          "flightType" in selectedOptions
-        ) {
-          isOneWay = selectedOptions.flightType === "ONE_WAY";
-        }
-        return (
-          <FlightForm
-            // Pass common props first
-            {...commonFormProps}
-            departureRowStyle={dateSearchRowStyle} // Map specific row style
-            swapButtonContainerStyle={swapButtonContainerStyle} // Pass swap styles
-            swapButtonStyle={swapButtonStyle}
-            swapIconStyle={swapIconStyle}
-
-            // Pass specific FlightForm props (will override common ones if keys match)
-            {...flightFormProps}
-
-            // Pass controlled props
-            isOneWay={isOneWay}
-            onSearchPress={handleInternalSearch}
-            onInputFocus={handleInternalInputFocus}
-            onTextChange={handleInternalTextChange}
-            suggestionData={flightSuggestionData}
-          />
-        );
-      }
-      case "Hotels":
-        return (
-          <HotelForm
-            // Pass common props first
-            {...commonFormProps}
-            checkoutRowStyle={dateSearchRowStyle} // Map specific row style
-
-            // Pass specific HotelForm props (will override common ones if keys match)
-            {...hotelFormProps}
-
-            // Pass controlled props
-            onSearchPress={handleInternalSearch}
-            onInputFocus={handleInternalInputFocus}
-            onTextChange={handleInternalTextChange}
-            suggestionData={hotelSuggestionData}
-          />
-        );
-      case "Car Rentals":
-        return (
-          <CarRentalForm
-            // Pass common props first
-            {...commonFormProps}
-            pickupRowStyle={dateSearchRowStyle} // Map specific row style
-            swapButtonContainerStyle={swapButtonContainerStyle} // Pass swap styles
-            swapButtonStyle={swapButtonStyle}
-            swapIconStyle={swapIconStyle}
-            inputGroupStyle={inputGroupContainerStyle} // Map input group style
-
-            // Pass specific CarRentalForm props (will override common ones if keys match)
-            {...carRentalFormProps}
-
-            // Pass controlled props
-            onSearchPress={handleInternalSearch}
-            onInputFocus={handleInternalInputFocus}
-            onTextChange={handleInternalTextChange}
-            suggestionData={carSuggestionData}
-          />
-        );
-      default:
-        console.warn(`No content defined for tab: ${selectedTab}`);
-        return null;
-    }
-  };
-
-  return (
-    <View style={styles.container}>
-      {/* Conditionally render SummaryBar */}
-      {summaryBarMode && (
-        <SummaryBar
-          {...summaryBarProps}
-          mode={summaryBarMode}
-          onSelectionChange={handleInternalSummarySelectionChange}
-        />
-      )}
-
-      <TabSelector
-        {...tabSelectorProps}
-        tabs={tabs}
-        initialTab={selectedTab} // Use state for controlled component
-        onTabChange={handleTabChange}
-      />
-
-      <View style={styles.contentContainer}>{renderContent()}</View>
-    </View>
-  );
-};
-
-const themedStyles = (theme: ThemeType) =>
-  StyleSheet.create({
-    container: {
-      // Removed flex: 1 to allow content to determine height naturally
-    },
-    contentContainer: {
-      // Removed flex: 1
-    },
-  });
-
-export default TravelBooking;
+// // src/components/TravelBooking.tsx (or wherever TravelBooking is)
+// import React, { useState, useCallback, useMemo, useEffect } from "react";
+// import { View, StyleSheet, StyleProp, ViewStyle, TextStyle } from "react-native"; // Import style types
+// import TabSelector, { TabSelectorProps } from "./TabSelector"; // Adjust import path
+// import FlightForm, { FlightFormProps } from "./FlightForm"; // Adjust import path
+// import HotelForm, { HotelFormProps } from "./HotelForm"; // Adjust import path
+// import CarRentalForm, {
+//   CarRentalFormProps,
+//   mockCarSuggestions,
+// } from "./CarRentalForm"; // Adjust import path
+// import { ThemeType, useTheme } from "../../theme"; // Adjust import path
+// import SummaryBar, {
+//   SelectionCallbackDataType,
+//   SummaryBarProps,
+// } from "./SummaryBar"; // Adjust import path
+// import {
+//   FlightSuggestions,
+//   FormInputType,
+//   HotelSuggestions,
+//   CarSuggestions,
+// } from "./types"; // Adjust import path
+// import { FlightSelection, FlightSummaryProps } from "./FlightSummary";
+// import { HotelSummaryProps, RoomState } from "./HotelSummary";
+
+// // Define the possible tab names (can be overridden via props)
+// type DefaultBookingType = "Flights" | "Hotels" | "Car Rentals";
+// const DEFAULT_TABS: DefaultBookingType[] = ["Flights", "Hotels", "Car Rentals"];
+
+// // Mock Data (Keep accessible for potential defaults)
+// const DEFAULT_MOCK_FLIGHT_SUGGESTIONS: FlightSuggestions[] = [
+//   {
+//     id: 1,
+//     city: "London",
+//     value: "London, United Kingdom",
+//     airports: [
+//       "Heathrow Airport (LHR)",
+//       "Gatwick Airport (LGW)",
+//       "Stansted Airport (STN)",
+//     ],
+//   },
+//   {
+//     id: 2,
+//     city: "New York",
+//     value: "New York, USA",
+//     airports: [
+//       "John F. Kennedy Intl (JFK)",
+//       "LaGuardia Airport (LGA)",
+//       "Newark Liberty Intl (EWR)",
+//     ],
+//   },
+// ];
+// const DEFAULT_MOCK_HOTEL_SUGGESTIONS: HotelSuggestions[] = [
+//   { id: 1, city: "Beirut", country: "Lebanon", value: "BEIRUT, LEBANON" },
+//   {
+//     id: 2,
+//     city: "Dubai",
+//     country: "United Arab Emirates",
+//     value: "DUBAI, UNITED ARAB EMIRATES",
+//   },
+// ];
+// const DEFAULT_MOCK_CAR_SUGGESTIONS: CarSuggestions[] = mockCarSuggestions;
+
+// // --- TravelBooking Props Interface ---
+// export interface TravelBookingProps {
+//   /** Array of tab names. Defaults to ['Flights', 'Hotels', 'Car Rentals'] */
+//   tabs?: string[];
+//   /** The initially selected tab. Defaults to the first tab in the `tabs` array. */
+//   initialTab?: string;
+//   /** Callback when the selected tab changes */
+//   onTabChange?: (tab: string) => void;
+//   /** Callback when the search button is pressed in any form */
+//   onSearch?: (details: any) => void;
+//   /** Callback when any form input gains focus */
+//   onInputFocus?: (input: FormInputType) => void;
+//   /** Callback when text changes in location inputs */
+//   onTextChange?: (text: string) => void;
+
+//   /** Initial selection state for FlightSummary (if mode is 'flight') */
+//   initialFlightSelection?: FlightSelection;
+//   /** Initial selection state for HotelSummary (if mode is 'hotel') */
+//   initialHotelSelection?: RoomState[];
+//   /** Callback when the selection in SummaryBar changes */
+//   onSummarySelectionChange?: (selection: SelectionCallbackDataType) => void;
+
+//   /** Suggestion data for FlightForm */
+//   flightSuggestionData?: FlightSuggestions[];
+//   /** Suggestion data for HotelForm */
+//   hotelSuggestionData?: HotelSuggestions[];
+//   /** Suggestion data for CarRentalForm */
+//   carSuggestionData?: CarSuggestions[];
+
+//   // --- Common Style Props ---
+//   /** Style for the root container of each form */
+//   formContainerStyle?: StyleProp<ViewStyle>;
+//   /** Style for input labels */
+//   labelStyle?: StyleProp<TextStyle>;
+//   /** Style for the CustomInput's TextInput component */
+//   inputStyle?: StyleProp<ViewStyle>; // Renamed from commonInputStyle for clarity
+//   /** Style for the touchable wrapper around date displays (if applicable) */
+//   inputTouchableStyle?: StyleProp<ViewStyle>;
+//   /** Style for the text inside inputs or date displays */
+//   inputTextStyle?: StyleProp<TextStyle>;
+//   /** Style for the container holding the date picker(s) and search button */
+//   dateSearchRowStyle?: StyleProp<ViewStyle>;
+//   /** Style for the individual date display groups within DateRangePicker */
+//   dateInputGroupStyle?: StyleProp<ViewStyle>;
+//   /** Style for the search button */
+//   searchButtonStyle?: StyleProp<ViewStyle>;
+//   /** Style for the search icon */
+//   searchIconStyle?: StyleProp<TextStyle>;
+//   /** Theme overrides for the calendar component */
+//   calendarThemeOverrides?: object;
+//   /** Style for the container wrapping the calendar modal/view */
+//   calendarContainerStyle?: StyleProp<ViewStyle>;
+//   /** Style for the container wrapping the swap button (Flights/Cars) */
+//   swapButtonContainerStyle?: StyleProp<ViewStyle>;
+//   /** Style for the swap button itself (Flights/Cars) */
+//   swapButtonStyle?: StyleProp<ViewStyle>;
+//   /** Style for the swap icon (Flights/Cars) */
+//   swapIconStyle?: StyleProp<TextStyle>;
+//   /** Style for the container wrapping the input fields (Flights/Cars) */
+//   inputGroupContainerStyle?: StyleProp<ViewStyle>; // Added for consistency
+
+//   // --- Nested Props for Child Components ---
+
+//   /** Props to pass down to the TabSelector component */
+//   tabSelectorProps?: Omit<
+//     TabSelectorProps,
+//     "tabs" | "initialTab" | "onTabChange" // Controlled by TravelBooking
+//   >;
+
+//   /** Props to pass down to the SummaryBar component */
+//   summaryBarProps?: Omit<
+//     SummaryBarProps,
+//     | "mode"
+//     | "initialSelection"
+//     | "onSelectionChange"
+//     | "flightProps"
+//     | "hotelProps" // Controlled or derived by TravelBooking
+//   >;
+
+//   /** Props to pass down to the FlightSummary component (via SummaryBar) */
+//   flightSummaryProps?: Omit<
+//     FlightSummaryProps,
+//     "selection" | "onSelectionChange" // Controlled by SummaryBar/TravelBooking
+//   >;
+
+//   /** Props to pass down to the HotelSummary component (via SummaryBar) */
+//   hotelSummaryProps?: Omit<
+//     HotelSummaryProps,
+//     "selection" | "onSelectionChange" // Controlled by SummaryBar/TravelBooking
+//   >;
+
+//   /** Props to pass down to the FlightForm component */
+//   /** Props to pass down to the FlightForm component */
+//   flightFormProps?: Omit<
+//     FlightFormProps,
+//     "isOneWay" | "onSearchPress" | "onInputFocus" | "suggestionData" | "onTextChange" // Controlled or derived by TravelBooking
+//   >;
+
+//   /** Props to pass down to the HotelForm component */
+//   hotelFormProps?: Omit<
+//     HotelFormProps,
+//     "onSearchPress" | "onInputFocus" | "suggestionData" | "onTextChange" // Controlled by TravelBooking
+//   >;
+
+//   /** Props to pass down to the CarRentalForm component */
+//   carRentalFormProps?: Omit<
+//     CarRentalFormProps,
+//     "onSearchPress" | "onInputFocus" | "suggestionData" | "onTextChange"// Controlled by TravelBooking
+//   >;
+// }
+
+// // --- TravelBooking Component Implementation ---
+// const TravelBooking: React.FC<TravelBookingProps> = ({
+//   tabs = DEFAULT_TABS,
+//   initialTab,
+//   onTabChange,
+//   onSearch,
+//   initialFlightSelection,
+//   initialHotelSelection,
+//   onSummarySelectionChange,
+//   flightSuggestionData = DEFAULT_MOCK_FLIGHT_SUGGESTIONS, // Provide defaults
+//   hotelSuggestionData = DEFAULT_MOCK_HOTEL_SUGGESTIONS, // Provide defaults
+//   carSuggestionData = DEFAULT_MOCK_CAR_SUGGESTIONS, // Provide defaults
+//   tabSelectorProps,
+//   summaryBarProps,
+//   flightFormProps,
+//   hotelFormProps,
+//   carRentalFormProps,
+//   onInputFocus,
+//   onTextChange,
+//   // Destructure common style props
+//   formContainerStyle,
+//   labelStyle,
+//   inputStyle,
+//   inputTouchableStyle,
+//   inputTextStyle,
+//   dateSearchRowStyle,
+//   dateInputGroupStyle,
+//   searchButtonStyle,
+//   searchIconStyle,
+//   calendarThemeOverrides,
+//   calendarContainerStyle,
+//   swapButtonContainerStyle,
+//   swapButtonStyle,
+//   swapIconStyle,
+//   inputGroupContainerStyle, // Added
+// }) => {
+//   const { theme } = useTheme();
+//   const styles = useMemo(() => themedStyles(theme), [theme]);
+
+//   const actualInitialTab = useMemo(
+//     () => initialTab ?? (tabs.length > 0 ? tabs[0] : ""),
+//     [initialTab, tabs]
+//   );
+
+//   const [selectedTab, setSelectedTab] = useState<string>(actualInitialTab);
+//   const [selectedOptions, setSelectedOptions] = useState<
+//     SelectionCallbackDataType | undefined
+//   >(
+//     actualInitialTab === tabs[0] && tabs[0] === "Flights"
+//       ? initialFlightSelection
+//       : actualInitialTab === tabs[1] && tabs[1] === "Hotels"
+//       ? initialHotelSelection
+//       : undefined
+//   );
+
+//   // --- Handlers ---
+//   const handleTabChange = useCallback(
+//     (tab: string) => {
+//       setSelectedTab(tab);
+//       if (tab === "Flights") {
+//         setSelectedOptions(initialFlightSelection);
+//       } else if (tab === "Hotels") {
+//         setSelectedOptions(initialHotelSelection);
+//       } else {
+//         setSelectedOptions(undefined);
+//       }
+//       onTabChange?.(tab);
+//     },
+//     [onTabChange, initialFlightSelection, initialHotelSelection]
+//   );
+
+//   const handleInternalSummarySelectionChange = useCallback(
+//     (selection: SelectionCallbackDataType) => {
+//       setSelectedOptions(selection);
+//       onSummarySelectionChange?.(selection);
+//     },
+//     [onSummarySelectionChange]
+//   );
+
+//   const handleInternalSearch = useCallback(
+//     (details: any) => {
+//       console.log("Internal Search Triggered:", details);
+//       onSearch?.(details);
+//     },
+//     [onSearch]
+//   );
+
+//   const handleInternalTextChange = useCallback(
+//     (text: string) => {
+//       onTextChange?.(text);
+//     },
+//     [onTextChange] // Added dependency
+//   );
+
+//   const handleInternalInputFocus = useCallback(
+//     (input: FormInputType) => {
+//       console.log("Input Focused:", input);
+//       onInputFocus?.(input);
+//     },
+//     [onInputFocus] // Added dependency
+//   );
+
+//   // Determine SummaryBar mode
+//   const summaryBarMode = useMemo(() => {
+//     if (selectedTab === "Flights") return "flight";
+//     if (selectedTab === "Hotels") return "hotel";
+//     return undefined;
+//   }, [selectedTab]);
+
+//   // --- Render Content Logic ---
+//   const renderContent = () => {
+//     const commonFormProps = {
+//       containerStyle: formContainerStyle,
+//       labelStyle: labelStyle,
+//       inputStyle: inputStyle,
+//       inputTouchableStyle: inputTouchableStyle,
+//       inputTextStyle: inputTextStyle,
+//       dateInputGroupStyle: dateInputGroupStyle,
+//       searchButtonStyle: searchButtonStyle,
+//       searchIconStyle: searchIconStyle,
+//       calendarThemeOverrides: calendarThemeOverrides,
+//       calendarContainerStyle: calendarContainerStyle,
+//     };
+
+//     switch (selectedTab) {
+//       case "Flights": {
+//         let isOneWay = false;
+//         if (
+//           selectedOptions &&
+//           typeof selectedOptions === "object" &&
+//           !Array.isArray(selectedOptions) &&
+//           "flightType" in selectedOptions
+//         ) {
+//           isOneWay = selectedOptions.flightType === "ONE_WAY";
+//         }
+//         return (
+//           <FlightForm
+//             // Pass common props first
+//             {...commonFormProps}
+//             departureRowStyle={dateSearchRowStyle} // Map specific row style
+//             swapButtonContainerStyle={swapButtonContainerStyle} // Pass swap styles
+//             swapButtonStyle={swapButtonStyle}
+//             swapIconStyle={swapIconStyle}
+
+//             // Pass specific FlightForm props (will override common ones if keys match)
+//             {...flightFormProps}
+
+//             // Pass controlled props
+//             isOneWay={isOneWay}
+//             onSearchPress={handleInternalSearch}
+//             onInputFocus={handleInternalInputFocus}
+//             onTextChange={handleInternalTextChange}
+//             suggestionData={flightSuggestionData}
+//           />
+//         );
+//       }
+//       case "Hotels":
+//         return (
+//           <HotelForm
+//             // Pass common props first
+//             {...commonFormProps}
+//             checkoutRowStyle={dateSearchRowStyle} // Map specific row style
+
+//             // Pass specific HotelForm props (will override common ones if keys match)
+//             {...hotelFormProps}
+
+//             // Pass controlled props
+//             onSearchPress={handleInternalSearch}
+//             onInputFocus={handleInternalInputFocus}
+//             onTextChange={handleInternalTextChange}
+//             suggestionData={hotelSuggestionData}
+//           />
+//         );
+//       case "Car Rentals":
+//         return (
+//           <CarRentalForm
+//             // Pass common props first
+//             {...commonFormProps}
+//             pickupRowStyle={dateSearchRowStyle} // Map specific row style
+//             swapButtonContainerStyle={swapButtonContainerStyle} // Pass swap styles
+//             swapButtonStyle={swapButtonStyle}
+//             swapIconStyle={swapIconStyle}
+//             inputGroupStyle={inputGroupContainerStyle} // Map input group style
+
+//             // Pass specific CarRentalForm props (will override common ones if keys match)
+//             {...carRentalFormProps}
+
+//             // Pass controlled props
+//             onSearchPress={handleInternalSearch}
+//             onInputFocus={handleInternalInputFocus}
+//             onTextChange={handleInternalTextChange}
+//             suggestionData={carSuggestionData}
+//           />
+//         );
+//       default:
+//         console.warn(`No content defined for tab: ${selectedTab}`);
+//         return null;
+//     }
+//   };
+
+//   return (
+//     <View style={styles.container}>
+//       {/* Conditionally render SummaryBar */}
+//       {summaryBarMode && (
+//         <SummaryBar
+//           {...summaryBarProps}
+//           mode={summaryBarMode}
+//           onSelectionChange={handleInternalSummarySelectionChange}
+//         />
+//       )}
+
+//       <TabSelector
+//         {...tabSelectorProps}
+//         tabs={tabs}
+//         initialTab={selectedTab} // Use state for controlled component
+//         onTabChange={handleTabChange}
+//       />
+
+//       <View style={styles.contentContainer}>{renderContent()}</View>
+//     </View>
+//   );
+// };
+
+// const themedStyles = (theme: ThemeType) =>
+//   StyleSheet.create({
+//     container: {
+//       // Removed flex: 1 to allow content to determine height naturally
+//     },
+//     contentContainer: {
+//       // Removed flex: 1
+//     },
+//   });
+
+// export default TravelBooking;