'use client'

import { useEffect, useRef } from 'react'

export function ClientButton({
  children,
  onClick,
  ...props
}: {
  children?: React.ReactNode
  onClick?: ((event: React.MouseEvent<HTMLButtonElement>) => void) | string
} & React.ButtonHTMLAttributes<HTMLButtonElement>) {
  const btnRef = useRef<HTMLButtonElement>(null)

  useEffect(() => {
    if (!btnRef.current) return
    if (typeof onClick === 'string') {
      btnRef.current.onclick = onClick as any
    } else if (typeof onClick === 'function') {
      btnRef.current.onclick = (e: Event) => onClick(e as React.MouseEvent<HTMLButtonElement>)
    }
  }, [onClick])

  return (
    <button ref={btnRef} {...props}>
      {children}
    </button>
  )
}