/* eslint-disable react/no-danger */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { FaClock } from '@react-icons/all-files/fa/FaClock';
import { translate } from '~helpers/getters';
import Link from '~hooks/link';
import { formatDate } from '~helpers/date-time';
import { Context } from '~context/MainProvider';
import styles from './fact-check.module.scss';
import FactCheckIcon from '../../../../../images/icons/fact-check';

export default function FactCheck({
  date = '',
  dateFormat = 'DD.MM.YYYY',
  dateSeparator = '/',
  readingTime = '',
  reviewer = {},
  verifiedIconWidth = 14,
  verifiedIconHeight = 14,
  readTimeIcon = <FaClock title="Clock Icon" />,
}) {
  const { translations } = useContext(Context) || {};

  return (
    <>
      {(readingTime || reviewer || date) && (
        <div className={styles.factCheck || ''}>
          {reviewer && (
            <div className={styles.reviewer || ''}>
              <FactCheckIcon
                width={verifiedIconWidth}
                height={verifiedIconHeight}
                color="#457BF9"
              />
              <span>{` ${translate(translations, 'fact_checked_by', 'Fact-checked by:')} `}</span>
              <Link to={reviewer.profile_page_path} title={reviewer.name}>
                {reviewer.name}
              </Link>
            </div>
          )}
          <div className={styles.dateInfo}>
            {date && (
              <div className={styles.dateTimeWrapper || ''}>
                <span>{translate(translations, 'published_on', 'Published on ')}</span>
                {formatDate(date, dateFormat, dateSeparator, 'en-GB')}
              </div>
            )}
            {readingTime && (
              <div className={styles.readingTime || ''}>
                {readTimeIcon}
                {` ${readingTime} ${translate(translations, 'minutes', 'min')} `}
                <span className={styles.readText || ''}>
                  {translate(translations, 'read', 'read')}
                </span>
              </div>
            )}
          </div>
        </div>
      )}
    </>
  );
}

FactCheck.propTypes = {
  date: PropTypes.string,
  dateFormat: PropTypes.string,
  dateSeparator: PropTypes.string,
  readingTime: PropTypes.string,
  reviewer: PropTypes.shape({
    name: PropTypes.string,
    profile_page_path: PropTypes.string,
  }),
  verifiedIconWidth: PropTypes.number,
  verifiedIconHeight: PropTypes.number,
  readTimeIcon: PropTypes.node,
};
