HeroUI AlertDialog

"use client"

import { AlertDialog } from "@/components/ui/heroui-alert-dialog"
import { Button } from "@heroui/react"

const examples = [
  { trigger: "Sign Out", status: "accent", header: "Sign out of your account?", body: "You'll need to sign in again to access your account. Any unsaved changes will be lost.", cancel: "Stay Signed In", confirm: "Sign Out", className: "bg-accent-soft text-accent-soft-foreground" },
  { trigger: "Complete Task", status: "success", header: "Complete this task?", body: "This will mark the task as complete and notify all team members. The task will be moved to your completed list.", cancel: "Not Yet", confirm: "Mark Complete", className: "bg-success-soft text-success-soft-foreground" },
  { trigger: "Discard Changes", status: "warning", header: "Discard unsaved changes?", body: "You have unsaved changes that will be permanently lost. Are you sure you want to discard them?", cancel: "Keep Editing", confirm: "Discard", className: "bg-warning-soft text-warning-soft-foreground" },
  { trigger: "Delete Account", status: "danger", header: "Delete your account?", body: "This will permanently delete your account and remove all your data from our servers. This action is irreversible.", cancel: "Cancel", confirm: "Delete Account", className: "bg-danger-soft text-danger-soft-foreground" },
] as const

export default function Statuses() {
  return (
    <div className="flex flex-wrap justify-center gap-4">
      {examples.map((item) => (
        <AlertDialog key={item.status}>
          <Button className={item.className}>{item.trigger}</Button>
          <AlertDialog.Backdrop>
            <AlertDialog.Container>
              <AlertDialog.Dialog className="sm:max-w-[400px]">
                <AlertDialog.CloseTrigger />
                <AlertDialog.Header>
                  <AlertDialog.Icon status={item.status} />
                  <AlertDialog.Heading>{item.header}</AlertDialog.Heading>
                </AlertDialog.Header>
                <AlertDialog.Body><p>{item.body}</p></AlertDialog.Body>
                <AlertDialog.Footer>
                  <Button slot="close" variant="tertiary">{item.cancel}</Button>
                  <Button slot="close" variant={item.status === "danger" ? "danger" : "primary"}>{item.confirm}</Button>
                </AlertDialog.Footer>
              </AlertDialog.Dialog>
            </AlertDialog.Container>
          </AlertDialog.Backdrop>
        </AlertDialog>
      ))}
    </div>
  )
}