edr-platform/apps/edr-freight-web/portal/src/pages/billing/DeleteInvoiceDialog.tsx

import type { ReactNode } from "react";

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

import { Button } from "@/components/ui/button";

export interface DeleteInvoiceDialogProps {
  invoiceNumber: string;
  onConfirm?: () => void;
  children: ReactNode;
}

export default function DeleteInvoiceDialog({
  invoiceNumber,
  onConfirm,
  children,
}: DeleteInvoiceDialogProps) {
  return (
    <Dialog>
      <DialogTrigger asChild>{children}</DialogTrigger>

      <DialogContent className="sm:max-w-md rounded-3xl">
        <DialogHeader>
          <DialogTitle className="text-xl font-bold">
            Void invoice?
          </DialogTitle>

          <DialogDescription>
            This will void invoice{" "}
            <span className="font-semibold text-slate-900">
              {invoiceNumber}
            </span>
            . This action cannot be undone.
          </DialogDescription>
        </DialogHeader>

        <DialogFooter className="mt-2">
          <DialogClose asChild>
            <Button variant="outline">Cancel</Button>
          </DialogClose>

          <DialogClose asChild>
            <Button
              onClick={onConfirm}
              className="bg-red-600 text-white hover:bg-red-700"
            >
              Void Invoice
            </Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}