import React, { lazy, Suspense } from 'react';
import PropTypes from 'prop-types';
import styles from './name.module.scss';

const VerifyIcon = lazy(() => import('~images/icons/verify'));

export default function Name({ className = '', name, icon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>, pronouns = '' }) {
  return (
    <div className={styles.title}>
      <h1 className={`${className || ''} ${styles?.name || ''}`}>
        {name}
        {pronouns && <small>({pronouns})</small>}
      </h1>
      {icon}
    </div>
  );
}

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