import React from "react"
import PropTypes from "prop-types"
import cx from "classnames"

const DEFAULT = "text-gray-600"

function WithCharacterCount({ maxLength, value, ...props }) {
  const currentLength = value.length
  const { children } = props
  const className = cx(props.className, DEFAULT)

  return (
    <React.Fragment>
      {children}
      <p className={className} {...props}>
        {currentLength} / {maxLength}
      </p>
    </React.Fragment>
  )
}

WithCharacterCount.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]),
  className: PropTypes.string,
  maxLength: PropTypes.number,
  value: PropTypes.string,
}

export default WithCharacterCount