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

// @flow

import * as React from 'react';
import Text from '@kiwicom/orbit-components/lib/Text';
import FlightDirect from '@kiwicom/orbit-components/lib/icons/FlightDirect';
import Stack from '@kiwicom/orbit-components/lib/Stack';
import { withTheme } from 'styled-components';
import type { ThemeProps } from '@kiwicom/nitro/lib/records/Theme';

import CarrierLogoWrapper from './CarrierLogoWrapper';
import { FormatDate } from '../../helpers/dateUtils';
import type { AccordionTripSummary_trip as AccordionTripSummaryType } from './__generated__/AccordionTripSummary_trip.graphql';

type Props = {|
  trip: AccordionTripSummaryType,
  ...ThemeProps,
|};
const AccordionHeader = ({ trip, theme }: Props) => {
  const departureDate = trip.departure?.localTime;
  const departureCode = trip.departure?.airport?.locationId;
  const departureCity = trip.departure?.airport?.city?.name;
  const arrivalCity = trip.arrival?.airport?.city?.name;
  const arrivalCode = trip.arrival?.airport?.locationId;

  return (
    <Stack flex align="center">
      <div>
        <CarrierLogoWrapper legs={trip.legs} />
      </div>
      <Stack spacing="extraTight">
        <Text type="secondary" size="small">
          {departureDate ? <FormatDate dateString={departureDate} /> : null}
        </Text>
        <Stack flex align="center">
          <Text weight="bold" type="primary">
            {departureCity}&nbsp;{departureCode}
          </Text>
          <FlightDirect
            customColor={theme.orbit.paletteInkLighter}
            reverseOnRtl
          />
          <Text weight="bold" type="primary">
            {arrivalCity}&nbsp;{arrivalCode}
          </Text>
        </Stack>
      </Stack>
    </Stack>
  );
};
export default withTheme(AccordionHeader);