Confirm Dialog

import { AlertTriangleIcon } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

type ConfirmDialogCopy = {
  badge: string
  trigger: string
  title: string
  description: string
  cancel: string
  confirm: string
}

type ConfirmDialogProps = {
  copy?: ConfirmDialogCopy
}

const defaultCopy: ConfirmDialogCopy = {
  badge: "Destructive action",
  trigger: "Delete project",
  title: "Delete this project?",
  description:
    "This action cannot be undone. The project, previews, and generated registry files will be removed from this workspace.",
  cancel: "Cancel",
  confirm: "Delete project",
}

export function ConfirmDialog({ copy = defaultCopy }: ConfirmDialogProps) {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="destructive" />}>
        <AlertTriangleIcon data-icon="inline-start" />
        {copy.trigger}
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <Badge className="w-fit" variant="outline">
            {copy.badge}
          </Badge>
          <DialogTitle>{copy.title}</DialogTitle>
          <DialogDescription>{copy.description}</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose render={<Button variant="outline" />}>
            {copy.cancel}
          </DialogClose>
          <DialogClose render={<Button variant="destructive" />}>
            {copy.confirm}
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}