import { type CSSProperties } from 'react'
import { audioManager } from '../game/effects/AudioManager.ts'

export type PushButtonStyle = CSSProperties & Record<`--${string}`, string | number>

export type PushButtonProps = {
  label: string
  onClick?: () => void
  disabled?: boolean
  title?: string
  'aria-label'?: string
  style?: PushButtonStyle
  type?: 'button' | 'submit' | 'reset'
}

export function pushButtonVars({
  front,
  text = '#fff',
  padding = '0.75rem 2rem',
  minWidth = '44px',
  minHeight = '44px',
  fontSize = '1.05rem',
  fontWeight = 600,
  radius = '12px',
}: {
  front: string
  text?: string
  padding?: string
  minWidth?: string
  minHeight?: string
  fontSize?: string
  fontWeight?: number
  radius?: string
}): PushButtonStyle {
  return {
    '--btn-front': front,
    '--btn-text': text,
    '--btn-padding': padding,
    '--btn-min-width': minWidth,
    '--btn-min-height': minHeight,
    '--btn-font-size': fontSize,
    '--btn-font-weight': String(fontWeight),
    '--btn-radius': radius,
    minWidth,
    minHeight,
  }
}

export function PushButton({ label, onClick, disabled = false, title, style, 'aria-label': ariaLabel, type = 'button' }: PushButtonProps) {
  return (
    <button
      className="btn-depth"
      type={type}
      onMouseEnter={() => audioManager.playHover()}
      onClick={(e) => {
        audioManager.play('click')
        onClick?.()
      }}
      disabled={disabled}
      title={title}
      aria-label={ariaLabel}
      style={style}
    >
      {label}
    </button>
  )
}