import React from 'react';
import type { SvgProps } from 'react-native-svg';
import { BrComponent } from './components/BrComponent';
import { CoComponent } from './components/CoComponent';
import { MxComponent } from './components/MxComponent';
import { Normalize } from '../../utils/normalize';

export const FLAGS = {
  br: BrComponent,
  co: CoComponent,
  mx: MxComponent,
};

export type FlagsName = keyof typeof FLAGS;

export interface FlagProps extends Omit<SvgProps, 'height' | 'width'> {
  name: FlagsName | undefined;
  width?: number;
  height?: number;
}

/**
 * @name Name of flag to render
 * @width Icon width
 * @height Icon height
 * @see https://zeroheight.com/502cb86ad/p/930bf3-icons/b/843925
 */
export const Flag = ({
  name,
  width = Normalize(28),
  height = Normalize(20),
  ...props
}: FlagProps) => {
  const FlagImpl = name !== undefined ? FLAGS[name] : null;

  return FlagImpl ? (
    <FlagImpl width={width} height={height} {...props} />
  ) : null;
};