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

import * as React from "react";
import Image from "./Image";

import type {CarrierCodesWithSvg} from "./constants/CarrierCodes";

const PATH = "https://assets.flexport.com/carriers";
const EXTENSION = ".svg";

type Props = {|
  /** Transportation mode. Determines how to interpret [code]. */
  +mode: "air" | "ocean",
  /** Depending on [mode]: "air" carriers use IATA codes, while "ocean" carriers use SCAC codes. */
  +code: CarrierCodesWithSvg,
  /** Carrier logos have square dimensions and will default to width: 100% unless a maxWidth is specified. */
  +maxWidth?: number,
|};

/**
 * @short Company logos for common ocean and air carriers, drawn as an SVG.
 * @brandStatus V2
 * @status Stable
 * @category General
 *
 * Carriers are identified by their SCAC or IATA code. The list of carriers with logos can be found
 * in constants/CarrierCodes.js. Specifying a carrier without a logo will render an empty
 * <img> element.
 */
function CarrierLogo({mode, code, maxWidth}: Props) {
  return (
    <Image
      src={`${PATH}/${mode}/${code}${EXTENSION}`}
      alt={`${code} Carrier logo (${mode})`}
      maxWidth={maxWidth}
    />
  );
}

export default (React.memo<Props>(CarrierLogo): React.AbstractComponent<
  Props,
  mixed
>);