@kiwicom/smart-faq/src/SmartFAQ/SingleBookingPage/bookingItem/BookingHeaders/Multicity.js

// @flow

import * as React from 'react';
import { graphql, createFragmentContainer } from 'react-relay';
import { Heading, Stack } from '@kiwicom/orbit-components';
import { FlightDirect } from '@kiwicom/orbit-components/lib/icons';

import type { Multicity_booking as MulticityBookingType } from './__generated__/Multicity_booking.graphql';

type Props = {|
  booking: MulticityBookingType,
  isMobile?: boolean,
|};

const MulticityBookingHeader = ({ booking, isMobile }: Props) => {
  const trips = booking.trips ?? [];
  const destination = booking.end?.airport?.city?.name ?? '';

  const cities = [
    ...trips.map(trip => trip?.departure?.airport?.city?.name),
    destination,
  ];

  const header = cities.map((city, i) => (
    <React.Fragment key={`city-${i}`}>
      {city}
      {i < cities.length - 1 && <FlightDirect reverseOnRtl />}
    </React.Fragment>
  ));

  return (
    <Heading type={isMobile ? 'title3' : 'title2'} dataTest="tripDescription">
      <Stack inline wrap spacing="none" align="center">
        {header}
      </Stack>
    </Heading>
  );
};

export const RawMulticityBookingHeader = MulticityBookingHeader;

export default createFragmentContainer(
  MulticityBookingHeader,
  graphql`
    fragment Multicity_booking on BookingMulticity {
      trips @relay(plural: true) {
        departure {
          airport {
            city {
              name
            }
          }
        }
      }
      end {
        airport {
          city {
            name
          }
        }
      }
    }
  `,
);