{"size": 1027, "ext": "js", "max_stars_repo_path": "src/components/button.js", "max_stars_repo_name": "tkstang/sbstang-hair", "max_stars_repo_stars_event_min_datetime": "2021-01-28T18:37:27.000Z", "max_stars_repo_stars_event_max_datetime": "2021-01-28T18:37:27.000Z", "max_issues_repo_path": "src/components/button.js", "max_issues_repo_name": "tkstang/sbstang-hair", "max_issues_repo_issues_event_min_datetime": "2021-03-09T01:33:58.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T10:06:01.000Z", "max_forks_repo_path": "src/components/button.js", "max_forks_repo_name": "tkstang/sbstang-hair", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 6, "max_forks_count": null, "avg_line_length": 22.3260869565, "max_line_length": 84, "alphanum_fraction": 0.6183057449}
import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'gatsby'
import styles from 'styles/button.module.scss'

const Button = ({ buttonText, buttonLink, width, customClass }) => {
  const internalLink = buttonLink.charAt(0) === '/' ? true : false;

  const button = (
    <button className={`${styles.button} ${customClass ? styles[customClass] : ''}`}
      style={ width ? { width: width }  : {} }>
      <div className={styles.interior}>
        <div className={styles.text}>
          {buttonText}
        </div>
      </div>
    </button>
  )

  return internalLink ? (
    <Link to={buttonLink}>
      {button}
    </Link>
  ) : (
    <a href={buttonLink} target="_blank" rel="noopener noreferrer">
      {button}
    </a>
  )
}

Button.propTypes = {
  buttonText: PropTypes.string,
  buttonLink: PropTypes.string,
  customClass: PropTypes.string,
  width: PropTypes.string
}

Button.defaultProps = {
  buttonText: '',
  buttonLink: '',
  customClass: '',
  width: ''
}

export default Button
