<script lang="ts">
    let {onCancel, onConfirm}: {onCancel:()=>void, onConfirm:(message:string)=>void} = $props();
    
    let message:string = $state("");
    const maxLength = $state(100);
    
    function handleConfirm(e:Event) {
        e.preventDefault();
        if (message.length <= maxLength) {
            onConfirm(message);
            onCancel();
        }
    }
  </script>
  
  <div
    class="modal fade show d-block"
    tabindex="-1"
    style="background-color: rgba(0, 0, 0, 0.5);"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Confirmar acción</h5>
          <button type="button" class="btn-close" aria-label="Close" onclick={onCancel}></button>
        </div>
        <div class="modal-body">
          <form onsubmit={(e)=>handleConfirm(e)}>
            <div class="mb-3">
              <label for="message" class="form-label">Mensaje</label>
              <input
                type="text"
                id="message"
                class="form-control"
                bind:value={message}
                maxlength={maxLength}
                required
              />
              <div class="form-text">
                Caracteres restantes: {maxLength - message.length}
            </div>
            </div>
          </form>
        </div>
        <div class="modal-footer d-flex justify-content-between">
          <button type="button" class="btn btn-secondary" onclick={onCancel}>
            Cancelar
          </button>
          <button type="button" class="btn btn-primary" onclick={(e)=>handleConfirm(e)}>
            Confirmar
          </button>
        </div>
      </div>
    </div>
  </div>
  
