"use client"

import { useState } from "react"
import { Download } from "lucide-react"
import { toast } from "sonner"

interface Props {
  endpoint: string          // e.g. "/api/export/rent" or "/api/export/tenants"
  filename: string          // e.g. "rent-payments.csv"
  label?: string
}

export function CsvExportButton({ endpoint, filename, label = "Export CSV" }: Props) {
  const [loading, setLoading] = useState(false)

  async function handleExport() {
    setLoading(true)
    try {
      const res = await fetch(endpoint)
      if (!res.ok) throw new Error("Export failed")
      const blob = await res.blob()
      const url = URL.createObjectURL(blob)
      const a = document.createElement("a")
      a.href = url
      a.download = filename
      a.click()
      URL.revokeObjectURL(url)
      toast.success(`${filename} downloaded`)
    } catch {
      toast.error("Failed to export CSV")
    } finally {
      setLoading(false)
    }
  }

  return (
    <button
      onClick={handleExport}
      disabled={loading}
      className="flex items-center gap-2 rounded-lg border border-white/10 px-3 py-2 text-sm text-white/60 hover:border-white/20 hover:text-white transition disabled:opacity-40"
    >
      <Download className="h-4 w-4" />
      {loading ? "Exporting…" : label}
    </button>
  )
}