AndroidRemoteController/src/page/public/div-btn/div-btn.jsx

import React, { useState } from 'react'
import './div-btn.scss'

/**
 * Icon Button Component
 * @param {Object} props
 * @param {React.ReactNode} props.icon - Default icon (SVG or React component)
 * @param {React.ReactNode} props.iconHover - Hover icon (optional)
 * @param {React.ReactNode} props.iconPressed - Pressed icon (optional)
 * @param {React.ReactNode} props.iconDisabled - Disabled icon (optional)
 * @param {Function} props.onClick - Click handler function
 * @param {string} props.className - Additional CSS classes
 * @param {boolean} props.disabled - Disable button (default: false)
 * @param {string} props.title - Tooltip text
 * @param {boolean} props.rotateOnHover - Rotate icon on hover (default: false)
 * @param {number} props.rotateDegrees - Degrees to rotate on hover (default: 180)
 */
function DivBtn({
  icon,
  iconHover,
  iconPressed,
  iconDisabled,
  onClick,
  className = '',
  disabled = false,
  title = '',
  rotateOnHover = false,
  rotateDegrees = 180
}) {
  const [isPressed, setIsPressed] = useState(false)
  const [isHovered, setIsHovered] = useState(false)

  const handleClick = (e) => {
    if (!disabled && onClick) {
      onClick(e)
    }
  }

  const handleMouseDown = () => {
    if (!disabled) {
      setIsPressed(true)
    }
  }

  const handleMouseUp = () => {
    setIsPressed(false)
  }

  const handleMouseEnter = () => {
    if (!disabled) {
      setIsHovered(true)
    }
  }

  const handleMouseLeave = () => {
    setIsHovered(false)
    setIsPressed(false)
  }

  return (
    <div
      className={`div-btn ${rotateOnHover ? 'div-btn--rotate' : ''} ${disabled ? 'div-btn--disabled' : ''} ${isPressed ? 'div-btn--pressed' : ''} ${className}`}
      onClick={handleClick}
      onMouseDown={handleMouseDown}
      onMouseUp={handleMouseUp}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      title={title}
      role="button"
      tabIndex={disabled ? -1 : 0}
      onKeyDown={(e) => {
        if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
          e.preventDefault()
          handleClick(e)
        }
      }}
      style={rotateOnHover ? { '--rotate-degrees': `${rotateDegrees}deg` } : {}}
    >
      <div className="div-btn__icon div-btn__icon--default">
        {icon}
      </div>
      {iconHover && (
        <div className="div-btn__icon div-btn__icon--hover">
          {iconHover}
        </div>
      )}
      {iconPressed && (
        <div className="div-btn__icon div-btn__icon--pressed">
          {iconPressed}
        </div>
      )}
      {iconDisabled && (
        <div className="div-btn__icon div-btn__icon--disabled">
          {iconDisabled}
        </div>
      )}
    </div>
  )
}

export default DivBtn