// @flow
import React from 'react';
import type { Node } from 'react';

type Props = {
  children?: Node,
  href?: ?string,
  dataGtmEventType?: string,
  dataGtmEventContext?: string,
  className?: string,
  handleClick?: Function,
}

const OptionalAsLink = ({
  href,
  dataGtmEventType,
  dataGtmEventContext,
  children,
  className,
  handleClick,
}: Props) => {
  if (href) {
    return (
      <a
        className={className}
        href={href}
        data-gtm-event-type={dataGtmEventType}
        data-gtm-event-context={dataGtmEventContext}
        onClick={handleClick}
      >
        {children}
      </a>
    );
  }

  return <>{children}</>;
};

OptionalAsLink.defaultProps = {
  href: null,
  dataGtmEventType: '',
  dataGtmEventContext: '',
  children: null,
  className: '',
  handleClick: (() => {}),
};

export default OptionalAsLink;