import React, { useState } from 'react'

export default function LikeButton({ active = false, count = 0, onToggle, label = 'Like', activeLabel = 'Liked' }) {
  const [busy, setBusy] = useState(false)

  const handleClick = async () => {
    if (!onToggle || busy) return
    setBusy(true)
    try {
      await onToggle()
    } finally {
      setBusy(false)
    }
  }

  return (
    <button
      type="button"
      onClick={handleClick}
      disabled={busy}
      className={[
        'inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium transition-all disabled:cursor-not-allowed disabled:opacity-60',
        active
          ? 'border-rose-500/30 bg-rose-500/12 text-rose-300'
          : 'border-white/[0.08] bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white',
      ].join(' ')}
    >
      <i className={`fa-solid fa-fw ${busy ? 'fa-circle-notch fa-spin' : active ? 'fa-heart' : 'fa-heart'}`} />
      <span>{active ? activeLabel : label}</span>
      <span className="text-xs opacity-80">{Number(count || 0).toLocaleString()}</span>
    </button>
  )
}