import React from 'react';
import { classNames } from '@gigmedia/enigma-utils';
import PropTypes from 'prop-types';
import { months } from 'gatsby-core-theme/src/constants/common.mjs';
import useTranslate from '~hooks/useTranslate/useTranslate';
import styles from './verification-badge.module.scss';
import VerifyIcon from '../../../../images/icons/verified-author';

const VerificationBadge = ({ text, icon = <VerifyIcon color="#3B82F6" />, extraClass }) => {
  const month = new Date().getMonth();
  const defaultText = `${useTranslate('verified_on', 'Verified on')} ${useTranslate(
    months[month],
    months[month]
  )}`;

  return (
    <div className={classNames([styles.badgeContainer, extraClass])}>
      {icon}
      {text ?? defaultText}
    </div>
  );
};

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

export default VerificationBadge;
