'use client';

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogDescription,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { useState } from 'react';

interface ConfirmDialogProps {
  trigger: React.ReactNode;
  title?: string;
  message: string;
  onConfirm: () => void;
}

export function ConfirmDialog({
  trigger,
  title = 'Are you sure?',
  message,
  onConfirm,
}: ConfirmDialogProps) {
  const [open, setOpen] = useState(false);

  const handleConfirm = () => {
    onConfirm();
    setOpen(false);
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>{trigger}</DialogTrigger>
      <DialogContent
        className="dialog-box-bg export-CSV-widget"
        onInteractOutside={(event) => {
          event.preventDefault();
        }}
        onEscapeKeyDown={(event) => {
          event.preventDefault();
        }}
      >
        <div className="question-icon-show">
          <div className="question-icon-content">?</div>
        </div>
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <DialogDescription>{''}</DialogDescription>
        </DialogHeader>
        <div className="py-4 sub-title">{message}</div>
        <DialogFooter className="export-btn-section flex">
          <Button
            className="cancel-btn"
            variant="outline"
            onClick={() => setOpen(false)}
          >
            Cancel
          </Button>
          <Button className="confirm-btn" onClick={handleConfirm}>
            Yes, do it!
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}