import React, { lazy } from 'react';
import { classNames } from '@gigmedia/enigma-utils';
import PropTypes from 'prop-types';
import { FaCheckCircle } from '@react-icons/all-files/fa/FaCheckCircle';
import styles from './verification-badge.module.scss';

const FlagIcon = lazy(() => import('../../../../images/icons/country-flag'));
const VerificationBadge = ({
  flag = <FlagIcon />,
  icon = <FaCheckCircle color="#FFB612" />,
  extraClass,
}) => (
  <div className={classNames([styles.badgeContainer, extraClass])}>
    {flag}
    {icon}
  </div>
);

VerificationBadge.propTypes = {
  flag: PropTypes.element,
  icon: PropTypes.element,
  extraClass: PropTypes.string,
};

export default VerificationBadge;
