"use client"

import * as React from "react"

import { Button } from "@/registry/ui/button/button"
import { setToasterPosition, toast } from "@/registry/ui/toast/toast"

function pin(run: () => void) {
  setToasterPosition("bottom-right")
  run()
}

/**
 * Each control is a real product action; the toast is the consequence.
 */
export default function ToastVariantsDemo() {
  const [channel, setChannel] = React.useState("KX-α-042")
  const [syncing, setSyncing] = React.useState(false)

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <div className="flex flex-wrap gap-2">
        <Button
          size="sm"
          onClick={() =>
            pin(() =>
              toast.success({
                title: "Settings saved",
                description: "Preferences apply on the next handoff.",
              })
            )
          }
        >
          Save settings
        </Button>

        <Button
          size="sm"
          variant="outline"
          disabled={syncing}
          onClick={() => {
            pin(() => {
              setSyncing(true)
              toast({
                title: "Syncing archive…",
                description: "Pulling transmissions from station Delta.",
                timeout: 0,
              })
              window.setTimeout(() => {
                toast.dismiss()
                toast.success({
                  title: "Archive synced",
                  description: "1,204 transmissions stored.",
                })
                setSyncing(false)
              }, 1600)
            })
          }}
        >
          {syncing ? "Syncing…" : "Sync archive"}
        </Button>

        <Button
          size="sm"
          variant="outline"
          onClick={() =>
            pin(() => {
              void navigator.clipboard?.writeText("npx shadcn add @clow/button")
              toast({
                title: "Command copied",
                description: "Paste it in your project root.",
                timeout: 2200,
              })
            })
          }
        >
          Copy install command
        </Button>
      </div>

      <div className="flex flex-wrap gap-2">
        <Button
          size="sm"
          variant="outline"
          onClick={() =>
            pin(() =>
              toast.warning({
                title: "Weak signal",
                description: "Packet loss above 12% on the northern relay.",
              })
            )
          }
        >
          Run diagnostics
        </Button>

        <Button
          size="sm"
          variant="destructive"
          onClick={() => {
            const previous = channel
            setChannel("—")
            pin(() =>
              toast.destructive({
                title: "Relay decommissioned",
                description: `${previous} is offline.`,
                timeout: 8000,
                actionProps: {
                  children: "Undo",
                  onClick: () => {
                    setChannel(previous)
                    setToasterPosition("bottom-right")
                    toast.success({
                      title: "Restored",
                      description: `${previous} is back on the mesh.`,
                    })
                  },
                },
              })
            )
          }}
        >
          Decommission
        </Button>
      </div>

      <p className="text-xs text-muted-foreground">
        Active relay:{" "}
        <span className="font-mono text-foreground">{channel}</span>
      </p>
    </div>
  )
}
Draw

Examples
