import * as React from 'react';
import styled from '@emotion/styled';
import { bool, string } from 'prop-types';
import css from '@styled-system/css';
import Text from '../Text/Text/index';
import { focusVisibleRing } from '../../utils/styled';

const TextLink = styled(Text)(
  {
    backgroundColor: 'transparent',
    cursor: 'pointer',
    appearance: 'none',
  },
  ({ monochrome, color, theme }) =>
    css({
      color: monochrome ? 'inherit' : color || 'link',
      textDecoration: monochrome ? 'underline' : 'none',

      '&:hover': {
        color: monochrome ? 'inherit' : color || 'link',
        textDecoration: monochrome ? 'none' : 'underline',
      },
    })(theme),
  focusVisibleRing(3),
);

TextLink.propTypes = {
  monochrome: bool,
  color: string,
};

const AnchorTextLink = (props) => (
  <TextLink as="a" rel="noopener noreferrer" target="_blank" {...props} />
);

const ButtonTextLink = (props) => <TextLink as="button" type="button" {...props} />;

export default TextLink;
export { AnchorTextLink, ButtonTextLink };