/**
 * TEAM: frontend_infra
 * @flow
 */

import * as React from "react";
import {StyleSheet, css} from "aphrodite";
import CarrierLogo from "../../CarrierLogo";
import Group from "../../Group";
import Text from "../../Text";

/**
 * @title Basic usage
 */
export default function CarrierLogoBasicUsage(): React.Element<"div"> {
  return (
    <div className={css(styles.centered)}>
      <Group flexDirection="row" gap={64}>
        <Group flexDirection="column">
          <CarrierLogo mode="ocean" code="YMLU" maxWidth={64} />
          <Text scale="subtext">Yang Ming</Text>
        </Group>

        <Group flexDirection="column">
          <CarrierLogo mode="ocean" code="MSCU" maxWidth={64} />
          <Text scale="subtext">MSC</Text>
        </Group>

        <Group flexDirection="column">
          <CarrierLogo mode="ocean" code="MAEU" maxWidth={64} />
          <Text scale="subtext">APM-Maersk</Text>
        </Group>

        <Group flexDirection="column">
          <CarrierLogo mode="air" code="LH" maxWidth={64} />
          <Text scale="subtext">Lufthansa</Text>
        </Group>
      </Group>
    </div>
  );
}

const styles = StyleSheet.create({
  centered: {
    textAlign: "center",
  },
});