content: import React from 'react'
  import PropTypes from 'prop-types'
  
  // FPCC
  import useIcon from 'common/useIcon'
  
  function QrcodeButton({ active, onClick, iconStyling, withLabels }) {
    return (
      <button
        id="QrcodeButton"
        className={`${
          active ? 'bg-gray-100 text-fv-charcoal' : 'text-fv-charcoal-light'
        } w-full group flex items-center px-4 py-2 text-sm`}
        onClick={onClick}
      >
        <span className="sr-only">QR Code</span>
        {useIcon('Qrcode', `fill-current ${iconStyling}`)}
        {withLabels ? <span className="ml-3">QR CODE</span> : null}
      </button>
    )
  }
  
  // PROPTYPES
  const { bool, func, string } = PropTypes
  QrcodeButton.propTypes = {
    active: bool,
    onClick: func,
    iconStyling: string,
    withLabels: bool,
  }
  QrcodeButton.defaultProps = {
    active: false,
    iconStyling: 'h-8 w-8 md:h-6 md:w-6',
    withLabels: false,
  }
  
  export default QrcodeButton
  