Toast

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Toast, ToastProvider, ToastStack } from "@/components/ui/toast"

export function ArchiveToast() {
  const [sending, setSending] = useState<"idle" | "pending" | "done">("idle");
  const [failed, setFailed] = useState(false);
  return (
    <ToastProvider duration={5000}>
      <div className="flex flex-wrap justify-center gap-2">
        <Button
          onClick={() => {
            setSending("pending");
            window.setTimeout(() => setSending("done"), 1600);
          }}
        >
          Send 3 invoices
        </Button>
        <Button variant="secondary" className="text-danger" onClick={() => setFailed(true)}>Charge failing card</Button>
      </div>
      <Toast
        title={sending === "pending" ? "Sending 3 invoices…" : "Sent 3 invoices"}
        loading={sending === "pending"}
        variant="success"
        open={sending !== "idle"}
        onOpenChange={(open) => !open && setSending("idle")}
      >
        {sending === "pending" ? "Ostra Freight, Halden Analytics, Lumen Labs" : "Each customer got a PDF and a pay link."}
      </Toast>
      <Toast
        title="Lumen Labs card declined"
        variant="error"
        open={failed}
        onOpenChange={setFailed}
        action={{ label: "Email Lumen Labs", altText: "Ask Lumen Labs to update their card", onClick: () => setFailed(false) }}
      >
        Insufficient funds. We will retry on 12 Oct. Errors stay until you dismiss them.
      </Toast>
      <ToastStack />
    </ToastProvider>
  );
}