import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import 'reset-css/reset.css';
import '../color/color';
import '../interactions/interactions';
import '../typography/typography';
import css from './link-with-arrow-icon.css';

const LinkWithArrowIcon = ({ text, href, minor, heavy, inverse, ...props }) => (
  <a
    className={classnames(css['ds-link-with-arrow-icon'], {
      [css['ds-link-with-arrow-icon--minor']]: minor,
      [css['ds-link-with-arrow-icon--heavy']]: heavy,
      [css['ds-link-with-arrow-icon--inverse']]: inverse,
    })}
    href={href}
    {...props}
  >
    <span>{text}</span>
  </a>
);

LinkWithArrowIcon.defaultProps = {
  text: '',
  minor: false,
  heavy: false,
  inverse: false,
  href: '',
};

LinkWithArrowIcon.propTypes = {
  text: PropTypes.string,
  href: PropTypes.string,
  minor: PropTypes.bool,
  heavy: PropTypes.bool,
  inverse: PropTypes.bool,
};

export default LinkWithArrowIcon;
