import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import LazyImage from '~hooks/lazy-image';
import { translate } from '~helpers/getters';
import { Context } from '~context/MainProvider';
import styles from './name.module.scss';

export default function Name({ className = '', name, icon, pronouns = '' }) {
  const { translations } = useContext(Context) || {};

  return (
    <div className={styles.title}>
      <h1 className={`${className || ''} ${styles?.name || ''}`}>
        {name}
        {pronouns && <small>({pronouns})</small>}
      </h1>
      <LazyImage
        className={styles.verify}
        src={icon || '../../../images/verify.svg'}
        alt={translate(translations, 'verified', 'Verified')}
        loading="eager"
        width={20}
        height={20}
      />
    </div>
  );
}

Name.propTypes = {
  className: PropTypes.string,
  name: PropTypes.string,
  icon: PropTypes.string,
  pronouns: PropTypes.string,
};
