Toast

"use client"

import { Button } from "@/components/ui/button"
import { toast, Toaster } from "@/components/ui/toast"

// Notifications slide in at the top right and stack; hover one to see all.
export default function ToastDemo() {
  return (
    <Toaster>
      <div className="flex flex-wrap justify-center gap-2">
        <Button
          variant="secondary"
          onClick={() => toast.add({ title: "AirDrop", description: "John Appleseed would like to share “Roadmap.key”.", type: "info" })}
        >
          Show Notification
        </Button>
        <Button
          variant="secondary"
          onClick={() => toast.add({ title: "Backup Complete", description: "Time Machine finished backing up to Archive.", type: "success" })}
        >
          Success
        </Button>
        <Button
          variant="secondary"
          onClick={() =>
            toast.promise(new Promise((resolve) => setTimeout(resolve, 2000)), {
              loading: { title: "Downloading macOS 27.1…", description: "About 8 minutes remaining." },
              success: { title: "macOS 27.1 is ready", description: "Restart to install the update." },
              error: { title: "Download failed" },
            })
          }
        >
          Download
        </Button>
      </div>
    </Toaster>
  )
}