@kiwicom/smart-faq/src/SmartFAQ/SingleBookingPage/bookingItem/BookingHeaders/OneWay.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 { OneWay_booking as OneWayBookingType } from './__generated__/OneWay_booking.graphql';

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

const OneWayBookingHeader = ({ booking, isMobile }: Props) => {
  const origin = booking.trip?.departure?.airport?.city?.name ?? '';
  const destination = booking.trip?.arrival?.airport?.city?.name ?? '';

  return (
    <Heading type={isMobile ? 'title3' : 'title2'} dataTest="tripDescription">
      <Stack inline wrap align="center">
        {origin}
        <FlightDirect reverseOnRtl />
        {destination}
      </Stack>
    </Heading>
  );
};

export const RawOneWayBookingHeader = OneWayBookingHeader;

export default createFragmentContainer(
  OneWayBookingHeader,
  graphql`
    fragment OneWay_booking on BookingOneWay {
      trip {
        departure {
          airport {
            city {
              name
            }
          }
        }
        arrival {
          airport {
            city {
              name
            }
          }
        }
      }
    }
  `,
);