"use client";

import * as React from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
interface DeleteModalProps<T = any> {
  isOpen: boolean; // Control modal visibility
  setIsOpen: (open: boolean) => void; // Setter to close/open modal
  data?: T; // Any data you want to pass (episode, user, etc.)
  title?: string;
  description?: (data?: T) => string; // Function to generate description based on data
  onConfirm: (data?: T) => void; // Callback when Delete button is clicked
  confirmText?: string;
  cancelText?: string;
}

export const DeleteModal = <T,>({
  isOpen,
  setIsOpen,
  data,
  title = "Are you sure?",
  description = () => "This action cannot be undone.",
  onConfirm,
  confirmText = "Delete",
  cancelText = "Cancel",
}: DeleteModalProps<T>) => {
  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <DialogDescription>{description(data)}</DialogDescription>
        </DialogHeader>
        <DialogFooter className="flex justify-end gap-2">
          <Button variant="outline" onClick={() => setIsOpen(false)}>
            {cancelText}
          </Button>
          <Button
            variant="destructive"
            onClick={() => {
              onConfirm(data);
              setIsOpen(false);
            }}
          >
            {confirmText}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};