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

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

import typeof {countries as countriesType} from "./constants/AddressOptionConstants.generated";

type Country = $Keys<countriesType>;
const PATH = "https://assets.flexport.com/flags/svg/1/";
const EXTENSION = ".svg";

type Props = {|
  /** The `ISO 3166-1 aplpha` 2 character country code that you wish to display */
  +countryCode: Country,
  /** Flags have square dimensions and will default to width: 100% unless a maxWidth is specified. */
  +maxWidth?: number,
|};

/**
 * @short An SVG icon component specifically for country flags.
 * @brandStatus V2
 * @status Stable
 * @category General
 */
function Flag({countryCode, maxWidth}: Props) {
  return (
    <Image
      src={`${PATH}${countryCode}${EXTENSION}`}
      alt={`${countryCode} Flag`}
      maxWidth={maxWidth}
    />
  );
}

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