import React, { ReactNode } from 'react';
import cx from 'classnames';

interface Props {
  children: ReactNode,
  circle?: boolean,
  floating?: boolean,
  onClick?: () => void,
  extraClass?: string,
  link?:string,
}

const ContrastButton = ({ children, circle, floating, onClick, extraClass, link }:Props) => {
  const buttonStyle = cx(
    'c-contrast-button',
    { 'c-contrast-button--floating': floating },
    { 'c-contrast-button--circle': circle },
    extraClass);

  if (link) {
    return <a
      className={buttonStyle}
      onClick={onClick}
      href={link}
      target="_blank"
      rel="noreferrer">
      {children}
    </a>;
  }

  return (
    <button className={buttonStyle} onClick={onClick}>
      {children}
    </button>
  );
};

export { ContrastButton };