// @flow
import * as React from 'react';
import classnames from 'classnames';
import HappyYrbl from './gerbil-happy.png';
import SadYrbl from './gerbil-sad.png';

type Props = {
  title?: string,
  subtitle?: string | React.Node,
  type: string,
  className?: string,
};

const yrblTypes = {
  happy: HappyYrbl,
  sad: SadYrbl,
};

export default class extends React.PureComponent<Props> {
  static defaultProps = {
    type: 'happy',
  };

  render() {
    const { title, subtitle, type, className } = this.props;

    const image = yrblTypes[type];

    return (
      <div className="yrbl__wrap">
        <img alt="Friendly gerbil" className={classnames('yrbl', className)} src={`${image}`} />
        {title && subtitle && (
          <div className="yrbl__content">
            <h2 className="card__title card__title--deprecated">{title}</h2>
            <p>{subtitle}</p>
          </div>
        )}
      </div>
    );
  }
}