import React, { Component } from 'react';

import PropTypes from 'prop-types';

import md5 from 'md5';

import './IndexEntryItem.scss';

export default class IndexEntryItem extends Component {

  static propTypes = {

    term: PropTypes.string,

  };

  static defaultProps = {

    term: '',

  };

  constructor(props) {

    super(props);

    this.linkClick = this.linkClick.bind(this);

  }

  linkClick(e) {

    const { term } = this.props;

    document.getElementById(`${md5(term)}-term-entry`).scrollIntoView();

    e.preventDefault();

  }

  render() {

    const { term } = this.props;

    return <li><button onClick={this.linkClick} type="button" className="btn btn-link index-entry-item__btn">{ term }</button></li>;

  }

}