"use client"

import { useState } from "react"
import { Bell, Loader2 } from "lucide-react"
import { toast } from "sonner"

export function SendReminderButton({ tenantId, paymentId }: { tenantId: string; paymentId: string }) {
  const [loading, setLoading] = useState(false)

  async function send() {
    setLoading(true)
    const res = await fetch("/api/notifications", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ type: "rent_reminder", tenant_id: tenantId, payment_id: paymentId }),
    })
    setLoading(false)
    if (res.ok) toast.success("Reminder sent")
    else toast.error("Failed to send reminder")
  }

  return (
    <button
      onClick={send}
      disabled={loading}
      title="Send rent reminder"
      className="flex h-7 items-center gap-1.5 rounded-md border border-white/10 px-2.5 text-xs text-white/50 transition hover:border-amber-500/30 hover:text-amber-400 disabled:opacity-40"
    >
      {loading ? <Loader2 className="h-3 w-3 animate-spin" /> : <Bell className="h-3 w-3" />}
      Remind
    </button>
  )
}