/**
 * Bulk Export Confirmation Modal
 * Reusable modal for confirming bulk export operations
 * Used across all table pages (Keywords, Clusters, Ideas, Tasks, etc.)
 */

import { Modal } from '../ui/modal';
import Button from '../ui/button/Button';
import { InfoIcon } from '../../icons';

interface BulkExportModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void | Promise<void>;
  title: string;
  message: string;
  confirmText?: string;
  isLoading?: boolean;
}

export default function BulkExportModal({
  isOpen,
  onClose,
  onConfirm,
  title,
  message,
  confirmText = 'Export',
  isLoading = false,
}: BulkExportModalProps) {
  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      className="max-w-md"
    >
      <div className="p-6">
        {/* Header with icon */}
        <div className="flex items-center gap-3 mb-4">
          <div className="flex items-center justify-center w-10 h-10 bg-blue-50 rounded-xl dark:bg-blue-500/10">
            <InfoIcon className="w-5 h-5 text-blue-500" />
          </div>
          <h2 className="text-xl font-bold text-gray-800 dark:text-white">
            {title}
          </h2>
        </div>

        {/* Message */}
        <p className="text-gray-600 dark:text-gray-400 mb-6">
          {message}
        </p>

        {/* Actions */}
        <div className="flex justify-end gap-4">
          <Button
            variant="outline"
            onClick={onClose}
            disabled={isLoading}
          >
            Cancel
          </Button>
          <Button
            variant="primary"
            onClick={onConfirm}
            disabled={isLoading}
          >
            {isLoading ? 'Exporting...' : confirmText}
          </Button>
        </div>
      </div>
    </Modal>
  );
}

