import React, { CSSProperties, useMemo } from "react";
import Flag, { FlagProps } from "react-world-flags";

const defaultStyle: CSSProperties = { height: "1.2rem", width: "2rem", objectFit: "cover" };

const FlagIcon: React.FC<FlagProps> = ({ code, style, ...rest }) => {
  const localCode = useMemo(() => (code === "en" ? "gb" : code), [code]);
  const localStyle = useMemo(() => ({ ...defaultStyle, ...style }), [style]);
  return <Flag {...rest} code={localCode} style={localStyle} />;
};

export default FlagIcon;