edr-platform/apps/edr-freight-web/portal/src/pages/customers2/DeleteCustomerDialog.tsx

import { useState, type ReactNode } from "react";

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  Button,
} from "@edr/ui-common";

export interface DeleteCustomerDialogProps {
  customerName: string;
  onConfirm?: () => void;
  children?: ReactNode;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
}

export default function DeleteCustomerDialog({
  customerName,
  onConfirm,
  children,
  open: openProp,
  onOpenChange,
}: DeleteCustomerDialogProps) {
  const isControlled = openProp !== undefined;
  const [internalOpen, setInternalOpen] = useState(false);
  const open = isControlled ? openProp : internalOpen;
  const setOpen = (next: boolean) => {
    if (!isControlled) setInternalOpen(next);
    onOpenChange?.(next);
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      {children ? <DialogTrigger asChild>{children}</DialogTrigger> : null}

      <DialogContent>
        <DialogHeader>
          <DialogTitle className="text-xl font-bold">
            Delete customer?
          </DialogTitle>

          <DialogDescription>
            This will permanently remove{" "}
            <span className="font-semibold text-slate-900">{customerName}</span>{" "}
            from your records. 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"
            >
              Delete
            </Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}