import React from 'react'
import classNames from 'classnames'
import { node, object, oneOf, oneOfType, string } from 'prop-types'

const Heading = ({ children, className, marginsClass, weight, level, ...props }) => {
  const HeadTag = `h${level}`
  const fontWeight = `font-${weight}`
  const styles = classNames(marginsClass, `heading-${level}`, fontWeight, className)

  return (
    <HeadTag className={styles} {...props}>
      {children}
    </HeadTag>
  )
}

Heading.displayName = 'Heading'

Heading.propTypes = {
  marginsClass: string,
  /** Text for heading */
  children: oneOfType([string, node]),
  /** Extra css classes to extend from external */
  className: oneOfType([string, object]),
  /** Extra css classes to extend from external */
  weight: oneOf(['normal', 'bold']),
  /** Text for heading */
  level: oneOf([1, 2, 3, 4, 5, 6])
}

Heading.defaultProps = {
  /** margins */
  marginsClass: 'my-4',
  /** Default to <h1> element */
  level: 1,
  /** Default bold font-weight */
  weight: 'bold'
}

export default Heading