import React from "react"
import PropTypes from "prop-types"
import Text from "../text"

const HEADINGS = {
  1: { size: "2xl" },
  2: { size: "xl" },
  3: { size: "lg" },
  4: { size: "md" },
  5: { size: "sm" },
  6: { size: "sm" },
}

export default function Heading({ level, as, children, className, color }) {
  as = as || `h${level}`

  return (
    <Text
      as={as}
      size={HEADINGS[level].size}
      weight="semibold"
      className={className}
      color={color}
    >
      {children}
    </Text>
  )
}

Heading.propTypes = {
  /** Changes the underlying tag while retaining the styles from the given `level`. */
  as: PropTypes.oneOf(["h1", "h2", "h3", "h4", "h5", "h6"]),
  level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
  /** A Tailwind-style text color such as `red-400`. */
  color: PropTypes.string,
  className: PropTypes.string,
  children: PropTypes.node,
}
