import {Link} from 'react-router-dom';
import PropTypes from 'prop-types';
import Button from './button';
import classNames from 'classnames';

function NavLink(props) {
  const content = (
    <Button
      color={props.color}
      outline={props.outline}
      flat={props.flat}
      size={props.size}
      textSize={props.textSize}
      loading={props.loading}
      disabled={props.disabled}
      className={classNames(props.className, 'min-w-max')}
    >
      {props.content || props.children}
    </Button>
  );

  if (props.disabled) return content;
  return (
    <Link to={props.to} replace={props.replace} className={props.className}>
      {content}
    </Link>
  );
}

NavLink.defaultProps = {
  outline: false,
  flat: false,
  size: 'base',
  textSize: 'sm',
  color: 'blue',
  loading: false,
  disabled: false,
  replace: false
};

NavLink.propTypes = {
  content: PropTypes.string,
  to: PropTypes.string.isRequired,
  color: PropTypes.string,
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
  outline: PropTypes.bool.isRequired,
  flat: PropTypes.bool.isRequired,
  size: PropTypes.oneOf(['zero', 'xs', 'sm', 'base', 'lg', 'xl']).isRequired,
  textSize: PropTypes.oneOf(['xs', 'sm', 'base', 'lg', 'xl']).isRequired,
  loading: PropTypes.bool.isRequired,
  disabled: PropTypes.bool.isRequired,
  replace: PropTypes.bool.isRequired,
  className: PropTypes.string
};

export default NavLink;
