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 DeleteFileUploadSettingDialogProps {
  settingLabel: string;
  settingCode: string;
  onConfirm?: () => void;
  children: ReactNode;
}

export default function DeleteFileUploadSettingDialog({
  settingLabel,
  settingCode,
  onConfirm,
  children,
}: DeleteFileUploadSettingDialogProps) {
  return (
    <Dialog>
      <DialogTrigger asChild>{children}</DialogTrigger>

      <DialogContent className="sm:max-w-md rounded-3xl">
        <DialogHeader>
          <DialogTitle className="text-xl font-bold">
            Delete file upload setting?
          </DialogTitle>

          <DialogDescription>
            This will remove{" "}
            <span className="font-semibold text-slate-900">{settingLabel}</span>{" "}
            (<span className="font-mono text-xs">{settingCode}</span>) and all
            of its fields. Forms referencing this code will fall back to no
            uploads.
          </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>
  );
}