CriteriaTransports

'use client';
import { useState } from 'react';

import { CriteriaTransports } from '@/ui/criteria/CriteriaTransports';
import type { CriteriaTransportsProps } from '@/ui/criteria/CriteriaTransports';

const labels: CriteriaTransportsProps['labels'] = {
  toggleLabel: 'Add transportation from',
  topCitiesLabel: 'Top cities',
  otherCitiesLabel: 'Other cities',
  clubMedTransportTitle: 'Opt for Club Med transportation:',
  clubMedTransportDescription:
    'Assistance and support in case of unforeseen events. Comfort guaranteed from departure to arrival.',
  reset: 'Reset',
  apply: 'Continue',
};

const topCities = [
  { code: 'BOS', name: 'Boston Logan International (BOS)' },
  { code: 'NYC', name: 'New York all airports (NYC)' },
  { code: 'MIA', name: 'Miami International (MIA)' },
  { code: 'LAX', name: 'Los Angeles International (LAX)' },
  { code: 'SFO', name: 'San Francisco International (SFO)' },
];

const otherCities = [
  { code: 'ABQ', name: 'Albuquerque (ABQ)' },
  { code: 'ANC', name: 'Anchorage International (ANC)' },
  { code: 'ATL', name: 'Atlanta Hartsfield-Jackson (ATL)' },
  { code: 'AUS', name: 'Austin-Bergstrom International (AUS)' },
  { code: 'BNA', name: 'Nashville International (BNA)' },
  { code: 'BUF', name: 'Buffalo Niagara International (BUF)' },
  { code: 'CLT', name: 'Charlotte Douglas International (CLT)' },
  { code: 'CMH', name: 'John Glenn Columbus International (CMH)' },
  { code: 'DAL', name: 'Dallas Love Field (DAL)' },
  { code: 'DEN', name: 'Denver International (DEN)' },
  { code: 'DTW', name: 'Detroit Metropolitan Wayne County (DTW)' },
  { code: 'HNL', name: 'Daniel K. Inouye International (HNL)' },
  { code: 'IAD', name: 'Washington Dulles International (IAD)' },
  { code: 'IND', name: 'Indianapolis International (IND)' },
  { code: 'JAX', name: 'Jacksonville International (JAX)' },
  { code: 'LAS', name: 'Harry Reid International (LAS)' },
  { code: 'MCI', name: 'Kansas City International (MCI)' },
  { code: 'MCO', name: 'Orlando International (MCO)' },
  { code: 'MDW', name: 'Chicago Midway International (MDW)' },
  { code: 'MEM', name: 'Memphis International (MEM)' },
  { code: 'MSP', name: 'Minneapolis-Saint Paul International (MSP)' },
  { code: 'MSY', name: 'Louis Armstrong New Orleans International (MSY)' },
  { code: 'OAK', name: 'Oakland Metropolitan International (OAK)' },
  { code: 'ORD', name: "Chicago O'Hare International (ORD)" },
  { code: 'PHL', name: 'Philadelphia International (PHL)' },
  { code: 'PHX', name: 'Phoenix Sky Harbor International (PHX)' },
  { code: 'PIT', name: 'Pittsburgh International (PIT)' },
  { code: 'PDX', name: 'Portland International (PDX)' },
  { code: 'RDU', name: 'Raleigh-Durham International (RDU)' },
  { code: 'RSW', name: 'Southwest Florida International (RSW)' },
  { code: 'SAN', name: 'San Diego International (SAN)' },
  { code: 'SAT', name: 'San Antonio International (SAT)' },
  { code: 'SEA', name: 'Seattle-Tacoma International (SEA)' },
  { code: 'SJC', name: 'Norman Y. Mineta San José International (SJC)' },
  { code: 'SLC', name: 'Salt Lake City International (SLC)' },
  { code: 'SMF', name: 'Sacramento International (SMF)' },
  { code: 'SNA', name: 'John Wayne Airport Orange County (SNA)' },
  { code: 'STL', name: 'St. Louis Lambert International (STL)' },
  { code: 'TPA', name: 'Tampa International (TPA)' },
  { code: 'TUL', name: 'Tulsa International (TUL)' },
];

export function CriteriaTransportsDemo() {
  const [enabled, setEnabled] = useState(false);
  const [selected, setSelected] = useState<string | null>(null);

  return (
    <div className="w-[380px] space-y-24">
      <CriteriaTransports
        labels={labels}
        title="Transport"
        enabled={enabled}
        topCities={topCities}
        otherCities={otherCities}
        selectedAirportCode={selected}
        onToggle={setEnabled}
        onSelect={setSelected}
        onReset={() => {
          setEnabled(false);
          setSelected(null);
        }}
        onApply={() => {}}
      />
      {selected && (
        <p className="text-b4">
          Selected: <strong>{selected}</strong>
        </p>
      )}
    </div>
  );
}

'use client';
import { useState } from 'react';

import { CriteriaTransports } from '@/ui/criteria/CriteriaTransports';
import type {
  CriteriaTransportsProps,
  CriteriaTransportsB2BLabels,
} from '@/ui/criteria/CriteriaTransports';
import type { RadioSelectOption } from '@/ui/forms/RadioSelect';

const labels: CriteriaTransportsProps['labels'] = {
  toggleLabel: 'Add transportation from',
  topCitiesLabel: 'Top cities',
  otherCitiesLabel: 'Other cities',
  clubMedTransportTitle: 'Opt for Club Med transportation:',
  clubMedTransportDescription:
    'Assistance and support in case of unforeseen events. Comfort guaranteed from departure to arrival.',
  reset: 'Reset',
  apply: 'Confirm',
};

const b2bLabels: CriteriaTransportsB2BLabels = {
  roundTripLabel: 'Round trip',
  oneWayLabel: 'One way',
  cabinClassLabel: 'Class',
  departureDateLabel: 'From',
};

const cabinClassOptions: RadioSelectOption<string>[] = [
  { value: 'all', label: 'All classes' },
  { value: 'economy', label: 'Economy' },
  { value: 'business', label: 'Business' },
  { value: 'first', label: 'First class' },
];

const topCities = [
  { code: 'BOS', name: 'Boston Logan International (BOS)' },
  { code: 'NYC', name: 'New York all airports (NYC)' },
  { code: 'MIA', name: 'Miami International (MIA)' },
];

const otherCities = [
  { code: 'ABQ', name: 'Albuquerque (ABQ)' },
  { code: 'ANC', name: 'Anchorage International (ANC)' },
  { code: 'ATL', name: 'Atlanta Hartsfield-Jackson (ATL)' },
  { code: 'AUS', name: 'Austin-Bergstrom International (AUS)' },
  { code: 'DEN', name: 'Denver International (DEN)' },
  { code: 'LAX', name: 'Los Angeles International (LAX)' },
  { code: 'SEA', name: 'Seattle-Tacoma International (SEA)' },
  { code: 'SFO', name: 'San Francisco International (SFO)' },
];

export function CriteriaTransportsB2BDemo() {
  const [enabled, setEnabled] = useState(false);
  const [selected, setSelected] = useState<string | null>(null);
  const [flightType, setFlightType] = useState<'roundtrip' | 'oneway'>('roundtrip');
  const [cabinClass, setCabinClass] = useState<string | undefined>(undefined);
  const [departureQuery, setDepartureQuery] = useState('');

  return (
    <div className="w-[380px] space-y-24">
      <CriteriaTransports
        mode="b2b"
        labels={labels}
        b2bLabels={b2bLabels}
        title="Transport"
        enabled={enabled}
        topCities={topCities}
        otherCities={otherCities}
        selectedAirportCode={selected}
        flightType={flightType}
        cabinClass={cabinClass}
        cabinClassOptions={cabinClassOptions}
        departureQuery={departureQuery}
        onToggle={setEnabled}
        onSelect={setSelected}
        onFlightTypeChange={setFlightType}
        onCabinClassChange={(_event, value) => setCabinClass(value)}
        onDepartureQueryChange={(_event, value) => setDepartureQuery(value)}
        onReset={() => {
          setEnabled(false);
          setSelected(null);
          setFlightType('roundtrip');
          setCabinClass(undefined);
          setDepartureQuery('');
        }}
        onApply={() => {}}
      />
      {selected && (
        <p className="text-b4">
          Selected: <strong>{selected}</strong>
        </p>
      )}
    </div>
  );
}