// Modal Component

export function showModal({ title, content, onConfirm, onCancel, confirmText = 'Confirm', cancelText = 'Cancel', danger = false }) {
  const backdrop = document.createElement('div');
  backdrop.className = 'modal-backdrop';
  backdrop.innerHTML = `
    <div class="modal">
      <div class="modal-header">
        <h3>${title}</h3>
      </div>
      <div class="modal-body">
        ${content}
      </div>
      <div class="modal-footer">
        <button class="btn btn-ghost" id="modal-cancel">${cancelText}</button>
        <button class="btn ${danger ? 'btn-danger' : 'btn-primary'}" id="modal-confirm">${confirmText}</button>
      </div>
    </div>
  `;
  document.body.appendChild(backdrop);

  backdrop.querySelector('#modal-cancel').onclick = () => {
    backdrop.remove();
    if (onCancel) onCancel();
  };

  backdrop.querySelector('#modal-confirm').onclick = () => {
    backdrop.remove();
    if (onConfirm) onConfirm();
  };

  backdrop.onclick = (e) => {
    if (e.target === backdrop) {
      backdrop.remove();
      if (onCancel) onCancel();
    }
  };

  return backdrop;
}

export function hideModal(backdrop) {
  if (backdrop && backdrop.parentElement) {
    backdrop.remove();
  }
}