import classNames from 'classnames'
import React from 'react'

interface IconButtonProps extends Omit<
  React.ButtonHTMLAttributes<HTMLButtonElement>,
  'type' | 'children'
> {
  label: string
  children: React.ReactNode
  className?: string
}

export function IconButton({
  label,
  className,
  children,
  ...rest
}: IconButtonProps) {
  return (
    <button
      type="button"
      className={classNames(
        'inline-flex items-center justify-center rounded-full transition-colors focus-ring p-2',
        {
          'cursor-not-allowed opacity-50': rest.disabled,
          'hover:bg-sand': !rest.disabled,
        },
        className
      )}
      {...rest}
    >
      <span className="sr-only">{label}</span>
      {children}
    </button>
  )
}