content: // @ts-check
  import React from 'react';
  import { Sparklines, SparklinesCurve } from 'react-sparklines';
  import { FormattedMessage } from 'react-intl';
  import ImmutablePropTypes from 'react-immutable-proptypes';
  import Permalink from './permalink';
  import ShortNumber from 'mastodon/components/short_number';
  
  /**
   * Used to render counter of how much people are talking about hashtag
   *
   * @type {(displayNumber: JSX.Element, pluralReady: number) => JSX.Element}
   */
  const accountsCountRenderer = (displayNumber, pluralReady) => (
    <FormattedMessage
      id='trends.counter_by_accounts'
      defaultMessage='{count, plural, one {{counter} person} other {{counter} people}} talking'
      values={{
        count: pluralReady,
        counter: <strong>{displayNumber}</strong>,
      }}
    />
  );
  
  const Hashtag = ({ hashtag }) => (
    <div className='trends__item'>
      <div className='trends__item__name'>
        <Permalink
          href={hashtag.get('url')}
          to={`/timelines/tag/${hashtag.get('name')}`}
        >
          #<span>{hashtag.get('name')}</span>
        </Permalink>
  
        <ShortNumber
          value={
            hashtag.getIn(['history', 0, 'accounts']) * 1 +
            hashtag.getIn(['history', 1, 'accounts']) * 1
          }
          renderer={accountsCountRenderer}
        />
      </div>
  
      <div className='trends__item__current'>
        <ShortNumber
          value={
            hashtag.getIn(['history', 0, 'uses']) * 1 +
            hashtag.getIn(['history', 1, 'uses']) * 1
          }
        />
      </div>
  
      <div className='trends__item__sparkline'>
        <Sparklines
          width={50}
          height={28}
          data={hashtag
            .get('history')
            .reverse()
            .map((day) => day.get('uses'))
            .toArray()}
        >
          <SparklinesCurve style={{ fill: 'none' }} />
        </Sparklines>
      </div>
    </div>
  );
  
  Hashtag.propTypes = {
    hashtag: ImmutablePropTypes.map.isRequired,
  };
  
  export default Hashtag;
  