import React from 'react';
import { useLocation } from 'react-router-dom';
import { sendEventViewItem } from '../../../utility/analytics/events';

import './index.scss';

// category possible values: primary, secondary

export default function Button(props) {
  const { data = {}, onClickHandler = () => {}, buttonId, buttonText, iconId, type, category = 'primary' } = props;
  const location = useLocation();
  const { id, name } = data;

  function send(params) {
    sendEventViewItem({ ...params, intent: buttonId }, location);
  }

  function clickHandler() {
    send({ id, name });
    onClickHandler();
  }

  return (
    <div className={`btn ${buttonId} ${category}`} onClick={clickHandler}>
      <svg className={`icon ${iconId}`} fill="none" stroke="currentColor">
        <use href={`#${iconId}`}></use>
      </svg>
      <span className="text">{buttonText}</span>
    </div>
  );
}