import React from "react"
import PropTypes from "prop-types"
import VisuallyHidden from "@reach/visually-hidden"
import CKIcon from "../ck-icon"
import Button from "."

/**
 * @param {Object} props
 * @param {"primary"|"secondary"|"tertiary"|"plain"} props.is
 * @param {"sm"|"md"|"lg"} props.size
 * @param {string} props.icon
 * @param props.label A11y label
 * @param className any custom classes to be applied to button
 */
const IconButton = React.forwardRef(
  (
    {
      icon,
      label,
      ...props
    },
    ref
  ) => {

    return (
      <Button
        {...props}
        size="icon"
        ref={ref}
      >
        <VisuallyHidden>{label}</VisuallyHidden>
        <CKIcon name={icon} className="pointer-events-none" />
      </Button>
    )
  }
)

IconButton.propTypes = {
  icon: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  ...Button?.propTypes,
}

export default IconButton
