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.css';

const LinkWithArrow = React.forwardRef(
  (
    {
      minor,
      serif,
      text,
      selected,
      className,
      direction,
      as: LinkComponent,
      textPosition,
      ...otherProps
    },
    ref,
  ) => (
    <LinkComponent
      ref={ref}
      className={classnames(
        css['ds-link-with-arrow'],
        {
          [css['ds-link-with-arrow--minor']]: minor,
          [css['ds-link-with-arrow--serif']]: serif,
          [css['ds-link-with-arrow--selected']]: selected,
          [css['ds-link-with-arrow--left']]: direction === 'left',
          [css['ds-link-with-arrow--text-left']]: textPosition === 'left',
          [css['ds-link-with-arrow--text-right']]: textPosition === 'right',
        },
        className,
      )}
      {...otherProps}
    >
      <span>{text}</span>
    </LinkComponent>
  ),
);

LinkWithArrow.displayName = 'LinkWithArrow';

LinkWithArrow.defaultProps = {
  minor: false,
  serif: false,
  text: '',
  className: null,
  selected: false,
  direction: 'right',
  as: 'a',
  textPosition: 'right',
};

LinkWithArrow.propTypes = {
  minor: PropTypes.bool,
  serif: PropTypes.bool,
  text: PropTypes.string,
  className: PropTypes.string,
  selected: PropTypes.bool,
  direction: PropTypes.oneOf(['left', 'right']),
  as: PropTypes.elementType,
  textPosition: PropTypes.oneOf(['left', 'right']),
};

export default LinkWithArrow;
