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

// @flow

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

import type { Return_booking as ReturnBookingType } from './__generated__/Return_booking.graphql';

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

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

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

export const RawReturnBookingHeader = ReturnBookingHeader;

export default createFragmentContainer(
  ReturnBookingHeader,
  graphql`
    fragment Return_booking on BookingReturn {
      outbound {
        departure {
          airport {
            city {
              name
            }
          }
        }
        arrival {
          airport {
            city {
              name
            }
          }
        }
      }
    }
  `,
);