import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import 'reset-css/reset.css';
import { IDENTS_NEWSLETTERS, IDENT_NAMES } from '../assets/idents-newsletters';
import { MonogramCircle } from '../assets/assets';

const validIdents = IDENT_NAMES;
const isValidIdent = ident => validIdents.includes(ident);

const IdentNewsletters = ({ className, height, ident, width }) => {
  if (!isValidIdent(ident)) {
    return (
      <span
        className={classnames(
          'ds-ident-newsletters',
          'ds-ident-newsletters--fallback',
          className,
        )}
      >
        <MonogramCircle
          height={height}
          width={width}
          className='ds-ident-newsletters__svg'
        />
      </span>
    );
  }

  const Svg = IDENTS_NEWSLETTERS[ident];
  return (
    <span
      className={classnames(
        'ds-ident-newsletters',
        `ds-ident-newsletters--${ident}`,
        className,
      )}
    >
      <Svg
        width={width}
        height={height}
        className='ds-ident-newsletters__svg'
      />
    </span>
  );
};

IdentNewsletters.propTypes = {
  className: PropTypes.string,
  height: PropTypes.number,
  width: PropTypes.number,
  ident: PropTypes.oneOf(validIdents).isRequired,
};

IdentNewsletters.defaultProps = {
  className: '',
  height: 112,
  width: 112,
};

export default IdentNewsletters;
