import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import 'reset-css/reset.css';
import '../color/color';
import '../color/color-hsl';
import '../grid/grid';
import '../interactions/interactions';
import '../typography/typography';
import css from './call-to-action-with-arrow.css';

const CallToActionWithArrow = ({
  href,
  text,
  inverse,
  secondary,
  className,
  ...otherProps
}) => (
  <a
    className={classnames(css['ds-call-to-action-with-arrow'], className, {
      [css['ds-call-to-action-with-arrow--secondary']]: secondary,
      [css['ds-call-to-action-with-arrow--inverse']]: inverse,
    })}
    href={href}
    {...otherProps}
  >
    <span>{text}</span>
  </a>
);

CallToActionWithArrow.defaultProps = {
  href: '',
  inverse: false,
  secondary: false,
  className: '',
};

CallToActionWithArrow.propTypes = {
  href: PropTypes.string,
  inverse: PropTypes.bool,
  secondary: PropTypes.bool,
  text: PropTypes.string.isRequired,
  className: PropTypes.string,
};

export default CallToActionWithArrow;
