mautourco-components 0.1.1 → 0.2.0

package/src/components/organisms/PaxSelector/PaxSelector.tsx

@@ -0,0 +1,979 @@
+import React, { useState, useRef, useEffect } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+
+export type ClientType = 'Standard client' | 'VIP' | 'VVIP' | 'Honeymooners';
+
+/**
+ * Individual passenger/pax data for a single room
+ */
+export interface PaxData {
+  adults: number;
+  teens: number;
+  children: number;
+  infants: number;
+  /** Ages for teens (1-18 years) */
+  teenAges?: number[];
+  /** Ages for children (1-18 years) */
+  childAges?: number[];
+  /** Ages for infants (1-18 years) */
+  infantAges?: number[];
+  clientType: ClientType;
+}
+
+/**
+ * Room data for multiple room mode
+ */
+export interface RoomData extends PaxData {
+  roomId: string;
+}
+
+export interface PaxSelectorProps {
+  /** Label for the selector */
+  label?: string;
+  /** Current pax data (single room mode) */
+  value?: PaxData;
+  /** Callback when pax data changes (single room mode) */
+  onChange?: (data: PaxData) => void;
+  /** Callback when "Add a room" is clicked */
+  onAddRoom?: () => void;
+  /** Callback when Done button is clicked */
+  onDone?: (data: PaxData | RoomData[]) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Additional CSS classes */
+  className?: string;
+  /** Maximum number of adults */
+  maxAdults?: number;
+  /** Maximum number of teens */
+  maxTeens?: number;
+  /** Maximum number of children */
+  maxChildren?: number;
+  /** Maximum number of infants */
+  maxInfants?: number;
+  /** Show add room link */
+  showAddRoom?: boolean;
+  /** Enable multiple room mode */
+  multipleRooms?: boolean;
+  /** Default rooms for multiple room mode */
+  defaultRooms?: RoomData[];
+  /** Callback when rooms change in multiple room mode */
+  onRoomsChange?: (rooms: RoomData[]) => void;
+  /** Callback when a room is removed */
+  onRemoveRoom?: (roomId: string) => void;
+  /** Default pax data for single room mode (will trigger onChange on mount) */
+  defaultPaxData?: PaxData;
+}
+
+const DEFAULT_PAX_DATA: PaxData = {
+  adults: 0,
+  teens: 0,
+  children: 0,
+  infants: 0,
+  teenAges: [],
+  childAges: [],
+  infantAges: [],
+  clientType: 'Standard client',
+};
+
+export const DEFAULT_PAX_DATA_WITH_ADULTS: PaxData = {
+  adults: 2,
+  teens: 0,
+  children: 0,
+  infants: 0,
+  teenAges: [],
+  childAges: [],
+  infantAges: [],
+  clientType: 'Standard client',
+};
+
+const CLIENT_TYPES: ClientType[] = ['Standard client', 'VIP', 'VVIP', 'Honeymooners'];
+
+// Age range for all child categories (teens, children, infants)
+const CHILD_CATEGORY_AGES = Array.from({ length: 18 }, (_, i) => i + 1); // 1-18 years
+
+interface AgeSelectorProps {
+  label: string;
+  value: number | undefined;
+  onChange: (age: number) => void;
+  ageRange: number[];
+  required?: boolean;
+}
+
+const AgeSelector: React.FC<AgeSelectorProps> = ({ label, value, onChange, ageRange, required }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState<string>(value !== undefined ? value.toString() : '');
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Sync input value when prop value changes
+  useEffect(() => {
+    setInputValue(value !== undefined ? value.toString() : '');
+  }, [value]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    
+    // Only allow numeric input or empty string
+    if (newValue === '' || /^\d+$/.test(newValue)) {
+      setInputValue(newValue);
+      
+      // Only update if it's a valid number within range
+      const numValue = parseInt(newValue, 10);
+      if (newValue === '') {
+        // Allow empty input - don't update onChange
+        return;
+      } else if (!isNaN(numValue) && ageRange.includes(numValue)) {
+        onChange(numValue);
+      }
+    }
+  };
+
+  const handleInputBlur = () => {
+    // Validate and set to valid value or clear if invalid
+    const numValue = parseInt(inputValue, 10);
+    if (inputValue === '') {
+      // Keep empty if user cleared it
+      return;
+    } else if (isNaN(numValue) || !ageRange.includes(numValue)) {
+      // Reset to current value if invalid
+      setInputValue(value !== undefined ? value.toString() : '');
+    } else {
+      // Ensure the input value matches the validated value
+      setInputValue(numValue.toString());
+    }
+  };
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      inputRef.current?.blur();
+    }
+  };
+
+  const handleSelect = (age: string) => {
+    const numAge = parseInt(age, 10);
+    onChange(numAge);
+    setIsOpen(false);
+    setInputValue(age);
+  };
+
+  const handleDropdownToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const ageOptions = ageRange.map(age => age.toString());
+  const displayValue = inputValue || undefined;
+
+  return (
+    <div className="pax-selector__age-selector" ref={containerRef}>
+      <Text size="sm" variant="regular" className="pax-selector__age-label">
+        {label}
+        {required && <span className="pax-selector__age-required"> *</span>}
+      </Text>
+        <div className="dropdown-container pax-selector__age-dropdown-container">
+        <div className={`dropdown-input ${isOpen ? 'dropdown-input--open pax-selector__age-dropdown-input--open' : ''} ${value !== undefined ? 'dropdown-input--selected' : 'dropdown-input--default'} pax-selector__age-dropdown-input`}>
+          <input
+            ref={inputRef}
+            type="text"
+            inputMode="numeric"
+            className="dropdown-input__text pax-selector__age-input-text"
+            value={inputValue}
+            onChange={handleInputChange}
+            onBlur={handleInputBlur}
+            onKeyDown={handleInputKeyDown}
+            onFocus={() => setIsOpen(false)}
+            placeholder="--"
+            aria-label={`${label} age`}
+            style={{ 
+              background: 'transparent', 
+              border: 'none', 
+              outline: 'none',
+              width: '100%',
+              cursor: 'text'
+            }}
+          />
+          <button
+            type="button"
+            className="pax-selector__age-dropdown-btn"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleDropdownToggle();
+            }}
+            aria-expanded={isOpen}
+            aria-haspopup="listbox"
+            aria-label="Open age dropdown"
+            style={{
+              background: 'transparent',
+              border: 'none',
+              cursor: 'pointer',
+              padding: 0,
+              display: 'flex',
+              alignItems: 'center'
+            }}
+          >
+            <Icon 
+              name="chevron-down" 
+              size="sm" 
+              className="dropdown-input__icon dropdown-input__icon--chevron" 
+            />
+          </button>
+        </div>
+        {isOpen && (
+          <div className="dropdown-menu" role="listbox">
+            {ageOptions.map((age) => (
+              <div
+                key={age}
+                className={`dropdown-option ${value?.toString() === age ? 'dropdown-option--selected' : ''}`}
+                onClick={() => handleSelect(age)}
+                role="option"
+                aria-selected={value?.toString() === age}
+              >
+                {age}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+interface StepperRowProps {
+  label: string;
+  value: number;
+  min?: number;
+  max?: number;
+  onChange: (value: number) => void;
+}
+
+const StepperRow: React.FC<StepperRowProps> = ({ 
+  label, 
+  value, 
+  min = 0, 
+  max = 99, 
+  onChange 
+}) => {
+  const handleDecrement = () => {
+    if (value > min) {
+      onChange(value - 1);
+    }
+  };
+
+  const handleIncrement = () => {
+    if (value < max) {
+      onChange(value + 1);
+    }
+  };
+
+  return (
+    <div className="pax-selector__stepper">
+      <Text size="base" variant="bold" className="pax-selector__stepper-label">
+        {label}
+      </Text>
+      <div className="pax-selector__stepper-controls">
+        <button
+          type="button"
+          className="pax-selector__stepper-btn"
+          onClick={handleDecrement}
+          disabled={value <= min}
+          aria-label={`Decrease ${label}`}
+        >
+          <Icon name="minus" size="sm" />
+        </button>
+        <span className="pax-selector__stepper-count">{value}</span>
+        <button
+          type="button"
+          className="pax-selector__stepper-btn"
+          onClick={handleIncrement}
+          disabled={value >= max}
+          aria-label={`Increase ${label}`}
+        >
+          <Icon name="plus" size="sm" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+interface ClientTypeSelectorProps {
+  value: ClientType;
+  onChange: (value: ClientType) => void;
+}
+
+const ClientTypeSelector: React.FC<ClientTypeSelectorProps> = ({ value, onChange }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const handleSelect = (type: ClientType) => {
+    onChange(type);
+    setIsOpen(false);
+  };
+
+  return (
+    <div className="pax-selector__client-type">
+      <Text size="sm" variant="regular" className="pax-selector__client-type-label">
+        Client type
+      </Text>
+      <div className="pax-selector__client-type-select" ref={containerRef}>
+        <button
+          type="button"
+          className="pax-selector__client-type-trigger"
+          onClick={() => setIsOpen(!isOpen)}
+          aria-expanded={isOpen}
+          aria-haspopup="listbox"
+        >
+          <div className="pax-selector__client-type-content">
+            <Icon name="user-icon" size="sm" className="pax-selector__client-type-icon" />
+            <span className="pax-selector__client-type-text">{value}</span>
+          </div>
+          <Icon 
+            name="chevron-down" 
+            size="sm" 
+            className={`pax-selector__client-type-chevron ${isOpen ? 'pax-selector__client-type-chevron--open' : ''}`} 
+          />
+        </button>
+        
+        {isOpen && (
+          <div className="pax-selector__client-type-dropdown" role="listbox">
+            {CLIENT_TYPES.map((type) => (
+              <button
+                key={type}
+                type="button"
+                className={`pax-selector__client-type-option ${value === type ? 'pax-selector__client-type-option--selected' : ''}`}
+                onClick={() => handleSelect(type)}
+                role="option"
+                aria-selected={value === type}
+              >
+                <Icon name="user-icon" size="sm" />
+                {type}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+interface RoomEditorProps {
+  room: RoomData;
+  roomNumber: number;
+  showRemove: boolean;
+  maxAdults: number;
+  maxTeens: number;
+  maxChildren: number;
+  maxInfants: number;
+  onChange: (room: RoomData) => void;
+  onRemove: () => void;
+}
+
+const RoomEditor: React.FC<RoomEditorProps> = ({
+  room,
+  roomNumber,
+  showRemove,
+  maxAdults,
+  maxTeens,
+  maxChildren,
+  maxInfants,
+  onChange,
+  onRemove,
+}) => {
+  const handleFieldChange = (field: keyof PaxData, value: number | ClientType | number[]) => {
+    onChange({ ...room, [field]: value });
+  };
+
+  const handleAgeChange = (category: 'teenAges' | 'childAges' | 'infantAges', index: number, age: number) => {
+    const ages = [...(room[category] || [])];
+    ages[index] = age;
+    handleFieldChange(category, ages);
+  };
+
+  // Generate age arrays based on counts
+  useEffect(() => {
+    const teenAges = room.teenAges || [];
+    const childAges = room.childAges || [];
+    const infantAges = room.infantAges || [];
+
+    // Adjust teen ages array
+    if (teenAges.length < room.teens) {
+      handleFieldChange('teenAges', [...teenAges, ...Array(room.teens - teenAges.length).fill(undefined)]);
+    } else if (teenAges.length > room.teens) {
+      handleFieldChange('teenAges', teenAges.slice(0, room.teens));
+    }
+
+    // Adjust child ages array
+    if (childAges.length < room.children) {
+      handleFieldChange('childAges', [...childAges, ...Array(room.children - childAges.length).fill(undefined)]);
+    } else if (childAges.length > room.children) {
+      handleFieldChange('childAges', childAges.slice(0, room.children));
+    }
+
+    // Adjust infant ages array
+    if (infantAges.length < room.infants) {
+      handleFieldChange('infantAges', [...infantAges, ...Array(room.infants - infantAges.length).fill(undefined)]);
+    } else if (infantAges.length > room.infants) {
+      handleFieldChange('infantAges', infantAges.slice(0, room.infants));
+    }
+  }, [room.teens, room.children, room.infants]);
+
+  // Chunk ages into groups of 2 for layout
+  const chunkAges = (ages: (number | undefined)[], category: string) => {
+    const chunks: (number | undefined)[][] = [];
+    for (let i = 0; i < ages.length; i += 2) {
+      chunks.push(ages.slice(i, i + 2));
+    }
+    return chunks;
+  };
+
+  const teenAgeChunks = chunkAges(room.teenAges || [], 'Teen');
+  const childAgeChunks = chunkAges(room.childAges || [], 'Child');
+  const infantAgeChunks = chunkAges(room.infantAges || [], 'Infant');
+
+  return (
+    <div className="pax-selector__room-container">
+      <div className="pax-selector__room-header">
+        <div className="pax-selector__room-title">
+          <Text size="lg" variant="bold" className="pax-selector__room-name">
+            Room {roomNumber}
+          </Text>
+          <Icon name="home" size="md" className="pax-selector__room-icon" />
+        </div>
+        {showRemove && (
+          <button
+            type="button"
+            className="pax-selector__room-remove"
+            onClick={onRemove}
+            aria-label={`Remove room ${roomNumber}`}
+          >
+            <Icon name="close" size="sm" className="pax-selector__room-remove-icon" />
+            <span className="pax-selector__room-remove-text">Remove</span>
+          </button>
+        )}
+      </div>
+
+      <div className="pax-selector__room-content">
+        <div className="pax-selector__steppers">
+          <StepperRow
+            label="Adult"
+            value={room.adults}
+            max={maxAdults}
+            onChange={(val) => handleFieldChange('adults', val)}
+          />
+          <StepperRow
+            label="Teen"
+            value={room.teens}
+            max={maxTeens}
+            onChange={(val) => handleFieldChange('teens', val)}
+          />
+          <StepperRow
+            label="Child"
+            value={room.children}
+            max={maxChildren}
+            onChange={(val) => handleFieldChange('children', val)}
+          />
+          <StepperRow
+            label="Infant"
+            value={room.infants}
+            max={maxInfants}
+            onChange={(val) => handleFieldChange('infants', val)}
+          />
+        </div>
+
+        {/* Age specification section */}
+        {((room.teens > 0) || (room.children > 0) || (room.infants > 0)) && (
+          <div className="pax-selector__age-section">
+            <Text size="base" variant="bold" className="pax-selector__age-section-title">
+              Please specify the age :
+            </Text>
+            
+            <div className="pax-selector__age-groups">
+              {/* Teen ages */}
+              {room.teens > 0 && teenAgeChunks.map((chunk, chunkIndex) => (
+                <div key={`teen-chunk-${chunkIndex}`} className="pax-selector__age-row">
+                  {chunk.map((age, ageIndex) => {
+                    const actualIndex = chunkIndex * 2 + ageIndex;
+                    return (
+                      <AgeSelector
+                        key={`teen-${actualIndex}`}
+                        label="Teen"
+                        value={age}
+                        onChange={(selectedAge) => handleAgeChange('teenAges', actualIndex, selectedAge)}
+                        ageRange={CHILD_CATEGORY_AGES}
+                        required
+                      />
+                    );
+                  })}
+                </div>
+              ))}
+
+              {/* Child ages */}
+              {room.children > 0 && childAgeChunks.map((chunk, chunkIndex) => (
+                <div key={`child-chunk-${chunkIndex}`} className="pax-selector__age-row">
+                  {chunk.map((age, ageIndex) => {
+                    const actualIndex = chunkIndex * 2 + ageIndex;
+                    return (
+                      <AgeSelector
+                        key={`child-${actualIndex}`}
+                        label="Child"
+                        value={age}
+                        onChange={(selectedAge) => handleAgeChange('childAges', actualIndex, selectedAge)}
+                        ageRange={CHILD_CATEGORY_AGES}
+                        required
+                      />
+                    );
+                  })}
+                </div>
+              ))}
+
+              {/* Infant ages */}
+              {room.infants > 0 && infantAgeChunks.map((chunk, chunkIndex) => (
+                <div key={`infant-chunk-${chunkIndex}`} className="pax-selector__age-row">
+                  {chunk.map((age, ageIndex) => {
+                    const actualIndex = chunkIndex * 2 + ageIndex;
+                    return (
+                      <AgeSelector
+                        key={`infant-${actualIndex}`}
+                        label="Infant"
+                        value={age}
+                        onChange={(selectedAge) => handleAgeChange('infantAges', actualIndex, selectedAge)}
+                        ageRange={CHILD_CATEGORY_AGES}
+                        required
+                      />
+                    );
+                  })}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <ClientTypeSelector
+          value={room.clientType}
+          onChange={(val) => handleFieldChange('clientType', val)}
+        />
+      </div>
+    </div>
+  );
+};
+
+const PaxSelector: React.FC<PaxSelectorProps> = ({
+  label = 'Number of pax',
+  value,
+  onChange,
+  onAddRoom,
+  onDone,
+  placeholder = 'Select pax',
+  className = '',
+  maxAdults = 10,
+  maxTeens = 10,
+  maxChildren = 10,
+  maxInfants = 10,
+  showAddRoom = true,
+  multipleRooms = false,
+  defaultRooms,
+  onRoomsChange,
+  onRemoveRoom,
+  defaultPaxData = DEFAULT_PAX_DATA_WITH_ADULTS,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [internalData, setInternalData] = useState<PaxData>(value || defaultPaxData || DEFAULT_PAX_DATA);
+  const [rooms, setRooms] = useState<RoomData[]>(
+    defaultRooms || [{ ...DEFAULT_PAX_DATA, roomId: '1' }]
+  );
+  const containerRef = useRef<HTMLDivElement>(null);
+  const hasInitialized = useRef(false);
+
+  // Sync internal data with external value prop
+  useEffect(() => {
+    if (value && !multipleRooms) {
+      setInternalData(value);
+    }
+  }, [value, multipleRooms]);
+
+  // Initialize with default pax data and trigger onChange on mount
+  useEffect(() => {
+    if (!hasInitialized.current && !value && defaultPaxData && !multipleRooms && onChange) {
+      hasInitialized.current = true;
+      onChange(defaultPaxData);
+    }
+  }, [defaultPaxData, value, multipleRooms, onChange]);
+
+  // Manage age arrays in single mode when counts change
+  useEffect(() => {
+    if (!multipleRooms) {
+      const teenAges = internalData.teenAges || [];
+      const childAges = internalData.childAges || [];
+      const infantAges = internalData.infantAges || [];
+
+      let needsUpdate = false;
+      const updatedData = { ...internalData };
+
+      // Adjust teen ages array
+      if (teenAges.length < internalData.teens) {
+        updatedData.teenAges = [...teenAges, ...Array(internalData.teens - teenAges.length).fill(undefined)];
+        needsUpdate = true;
+      } else if (teenAges.length > internalData.teens) {
+        updatedData.teenAges = teenAges.slice(0, internalData.teens);
+        needsUpdate = true;
+      }
+
+      // Adjust child ages array
+      if (childAges.length < internalData.children) {
+        updatedData.childAges = [...childAges, ...Array(internalData.children - childAges.length).fill(undefined)];
+        needsUpdate = true;
+      } else if (childAges.length > internalData.children) {
+        updatedData.childAges = childAges.slice(0, internalData.children);
+        needsUpdate = true;
+      }
+
+      // Adjust infant ages array
+      if (infantAges.length < internalData.infants) {
+        updatedData.infantAges = [...infantAges, ...Array(internalData.infants - infantAges.length).fill(undefined)];
+        needsUpdate = true;
+      } else if (infantAges.length > internalData.infants) {
+        updatedData.infantAges = infantAges.slice(0, internalData.infants);
+        needsUpdate = true;
+      }
+
+      if (needsUpdate) {
+        setInternalData(updatedData);
+        onChange?.(updatedData);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [internalData.teens, internalData.children, internalData.infants, multipleRooms]);
+
+  // Handle clicks outside the dropdown
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const handleDataChange = (field: keyof PaxData, newValue: number | ClientType | number[]) => {
+    const newData = { ...internalData, [field]: newValue };
+    setInternalData(newData);
+    onChange?.(newData);
+  };
+
+  const handleClear = () => {
+    if (multipleRooms) {
+      const clearedRooms = rooms.map(room => ({ ...DEFAULT_PAX_DATA, roomId: room.roomId }));
+      setRooms(clearedRooms);
+      onRoomsChange?.(clearedRooms);
+    } else {
+      const clearedData = { ...DEFAULT_PAX_DATA };
+      setInternalData(clearedData);
+      onChange?.(clearedData);
+    }
+  };
+
+  const handleDone = () => {
+    setIsOpen(false);
+    onDone?.(multipleRooms ? rooms : internalData);
+  };
+
+  const handleAddRoom = () => {
+    const newRoom: RoomData = { 
+      ...DEFAULT_PAX_DATA, 
+      roomId: `${rooms.length + 1}` 
+    };
+    const updatedRooms = [...rooms, newRoom];
+    setRooms(updatedRooms);
+    onRoomsChange?.(updatedRooms);
+    onAddRoom?.();
+  };
+
+  const handleRemoveRoom = (roomId: string) => {
+    const updatedRooms = rooms.filter(room => room.roomId !== roomId);
+    setRooms(updatedRooms);
+    onRoomsChange?.(updatedRooms);
+    onRemoveRoom?.(roomId);
+  };
+
+  const handleRoomChange = (roomId: string, updatedRoom: RoomData) => {
+    const updatedRooms = rooms.map(room => 
+      room.roomId === roomId ? updatedRoom : room
+    );
+    setRooms(updatedRooms);
+    onRoomsChange?.(updatedRooms);
+  };
+
+  const getTotalPax = () => {
+    if (multipleRooms) {
+      return rooms.reduce((total, room) => 
+        total + room.adults + room.teens + room.children + room.infants, 0
+      );
+    }
+    const { adults, teens, children, infants } = internalData;
+    return adults + teens + children + infants;
+  };
+
+  const getDisplayText = () => {
+    const total = getTotalPax();
+    if (total === 0) {
+      return placeholder;
+    }
+    return `${total} pax`;
+  };
+
+  const hasPax = getTotalPax() > 0;
+
+  return (
+    <div className={`pax-selector ${className}`} ref={containerRef}>
+      <button
+        type="button"
+        className="pax-selector__trigger"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        <Text size="sm" variant="regular" className="pax-selector__label">
+          {label}
+        </Text>
+        <div className={`pax-selector__input ${isOpen ? 'pax-selector__input--active' : ''}`}>
+          <div className="pax-selector__input-content">
+            <Icon name="user-icon" size="sm" className="pax-selector__input-icon" />
+            <span className={`pax-selector__input-text ${!hasPax ? 'pax-selector__input-placeholder' : ''}`}>
+              {getDisplayText()}
+            </span>
+          </div>
+          <Icon 
+            name="chevron-down" 
+            size="sm" 
+            className={`pax-selector__chevron ${isOpen ? 'pax-selector__chevron--open' : ''}`} 
+          />
+        </div>
+      </button>
+
+      {isOpen && (
+        <div className="pax-selector__dropdown">
+          {/* Multiple Rooms Mode */}
+          {multipleRooms ? (
+            <>
+              {showAddRoom && (
+                <button
+                  type="button"
+                  className="pax-selector__add-room"
+                  onClick={handleAddRoom}
+                >
+                  <Icon name="home" size="sm" className="pax-selector__add-room-icon" />
+                  Add a room
+                  <Icon name="plus" size="sm" className="pax-selector__add-room-icon" />
+                </button>
+              )}
+
+              <div className="pax-selector__rooms">
+                {rooms.map((room, index) => (
+                  <RoomEditor
+                    key={room.roomId}
+                    room={room}
+                    roomNumber={index + 1}
+                    showRemove={rooms.length > 1}
+                    maxAdults={maxAdults}
+                    maxTeens={maxTeens}
+                    maxChildren={maxChildren}
+                    maxInfants={maxInfants}
+                    onChange={(updatedRoom) => handleRoomChange(room.roomId, updatedRoom)}
+                    onRemove={() => handleRemoveRoom(room.roomId)}
+                  />
+                ))}
+              </div>
+            </>
+          ) : (
+            /* Single Room Mode */
+            <>
+              <div className="pax-selector__steppers">
+                <StepperRow
+                  label="Adult"
+                  value={internalData.adults}
+                  max={maxAdults}
+                  onChange={(val) => handleDataChange('adults', val)}
+                />
+                <StepperRow
+                  label="Teen"
+                  value={internalData.teens}
+                  max={maxTeens}
+                  onChange={(val) => handleDataChange('teens', val)}
+                />
+                <StepperRow
+                  label="Child"
+                  value={internalData.children}
+                  max={maxChildren}
+                  onChange={(val) => handleDataChange('children', val)}
+                />
+                <StepperRow
+                  label="Infant"
+                  value={internalData.infants}
+                  max={maxInfants}
+                  onChange={(val) => handleDataChange('infants', val)}
+                />
+              </div>
+
+              {/* Age specification for single room */}
+              {((internalData.teens > 0) || (internalData.children > 0) || (internalData.infants > 0)) && (
+                <div className="pax-selector__age-section">
+                  <Text size="base" variant="bold" className="pax-selector__age-section-title">
+                    Please specify the age :
+                  </Text>
+                  
+                  <div className="pax-selector__age-groups">
+                    {/* Helper function to chunk ages into rows of 2 */}
+                    {(() => {
+                      const chunkAges = (ages: (number | undefined)[], category: string) => {
+                        const chunks: (number | undefined)[][] = [];
+                        for (let i = 0; i < ages.length; i += 2) {
+                          chunks.push(ages.slice(i, i + 2));
+                        }
+                        return chunks;
+                      };
+
+                      const teenAgeChunks = chunkAges(internalData.teenAges || [], 'Teen');
+                      const childAgeChunks = chunkAges(internalData.childAges || [], 'Child');
+                      const infantAgeChunks = chunkAges(internalData.infantAges || [], 'Infant');
+
+                      const handleAgeChange = (category: 'teenAges' | 'childAges' | 'infantAges', index: number, age: number) => {
+                        const ages = [...(internalData[category] || [])];
+                        ages[index] = age;
+                        handleDataChange(category, ages);
+                      };
+
+                      return (
+                        <>
+                          {/* Teen ages */}
+                          {internalData.teens > 0 && teenAgeChunks.map((chunk, chunkIndex) => (
+                            <div key={`teen-chunk-${chunkIndex}`} className="pax-selector__age-row">
+                              {chunk.map((age, ageIndex) => {
+                                const actualIndex = chunkIndex * 2 + ageIndex;
+                                return (
+                                  <AgeSelector
+                                    key={`teen-${actualIndex}`}
+                                    label="Teen"
+                                    value={age}
+                                    onChange={(selectedAge) => handleAgeChange('teenAges', actualIndex, selectedAge)}
+                                    ageRange={CHILD_CATEGORY_AGES}
+                                    required
+                                  />
+                                );
+                              })}
+                            </div>
+                          ))}
+
+                          {/* Child ages */}
+                          {internalData.children > 0 && childAgeChunks.map((chunk, chunkIndex) => (
+                            <div key={`child-chunk-${chunkIndex}`} className="pax-selector__age-row">
+                              {chunk.map((age, ageIndex) => {
+                                const actualIndex = chunkIndex * 2 + ageIndex;
+                                return (
+                                  <AgeSelector
+                                    key={`child-${actualIndex}`}
+                                    label="Child"
+                                    value={age}
+                                    onChange={(selectedAge) => handleAgeChange('childAges', actualIndex, selectedAge)}
+                                    ageRange={CHILD_CATEGORY_AGES}
+                                    required
+                                  />
+                                );
+                              })}
+                            </div>
+                          ))}
+
+                          {/* Infant ages */}
+                          {internalData.infants > 0 && infantAgeChunks.map((chunk, chunkIndex) => (
+                            <div key={`infant-chunk-${chunkIndex}`} className="pax-selector__age-row">
+                              {chunk.map((age, ageIndex) => {
+                                const actualIndex = chunkIndex * 2 + ageIndex;
+                                return (
+                                  <AgeSelector
+                                    key={`infant-${actualIndex}`}
+                                    label="Infant"
+                                    value={age}
+                                    onChange={(selectedAge) => handleAgeChange('infantAges', actualIndex, selectedAge)}
+                                    ageRange={CHILD_CATEGORY_AGES}
+                                    required
+                                  />
+                                );
+                              })}
+                            </div>
+                          ))}
+                        </>
+                      );
+                    })()}
+                  </div>
+                </div>
+              )}
+
+              <ClientTypeSelector
+                value={internalData.clientType}
+                onChange={(val) => handleDataChange('clientType', val)}
+              />
+            </>
+          )}
+
+          <div className="pax-selector__actions">
+            <button
+              type="button"
+              className="pax-selector__clear-btn"
+              onClick={handleClear}
+            >
+              Clear Pax
+            </button>
+            <button
+              type="button"
+              className="pax-selector__done-btn"
+              onClick={handleDone}
+            >
+              Done
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PaxSelector;