import React from "react"
import PropTypes from "prop-types"
import VisuallyHidden from "../visually-hidden"
import cx from "classnames"

function Label({
  htmlFor,
  children,
  className,
  visuallyHidden,
  as: Component = "label",
  ...props
}) {
  const labelElement = (
    <Component
      className={cx(labelClasses, className)}
      htmlFor={htmlFor}
      {...props}
    >
      {children}
    </Component>
  )

  if (!visuallyHidden) return labelElement

  return <VisuallyHidden>{labelElement}</VisuallyHidden>
}

Label.propTypes = {
  /** If a `Label` has an associated element, pass the `id` of the element as `htmlFor`. */
  htmlFor: PropTypes.string,
  as: PropTypes.string,
  className: PropTypes.string,
  children: PropTypes.node,
  visuallyHidden: PropTypes.bool,
}

export default Label

export const labelClasses = "text-sm font-semibold font-sans leading-5 text-gray-800"
