interface ConfirmationModalOptions {
  show: string
  title: string
  message: string
  onCancel: string
  onConfirm: string
  cancelText: string
  confirmText: string
  disabled: string
}

const confirmationModalTemplate = ({
  show,
  title,
  message,
  onCancel,
  onConfirm,
  cancelText,
  confirmText,
  disabled,
}: ConfirmationModalOptions): string => `
  <!-- Delete Confirmation Modal -->
  <div v-if="${show}" class="saveto-wishlist-popup" role="dialog" aria-modal="true" aria-labelledby="stwl-confirm-title" aria-describedby="stwl-confirm-msg" @click.self="${onCancel}">
    <div class="saveto-wishlist-popup-content" style="max-width: 420px;">
      <div class="stwlite-tw-flex stwlite-tw-flex-col stwlite-tw-items-center stwlite-tw-text-center stwlite-tw-gap-4">
        <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-center stwlite-tw-w-14 stwlite-tw-h-14 stwlite-tw-rounded-full stwlite-tw-bg-red-100">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="stwlite-tw-w-7 stwlite-tw-h-7 stwlite-tw-text-red-600">
            <polyline points="3,6 5,6 21,6"></polyline>
            <path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"></path>
            <line x1="10" y1="11" x2="10" y2="17"></line>
            <line x1="14" y1="11" x2="14" y2="17"></line>
          </svg>
        </div>
        <h2 id="stwl-confirm-title" style="margin: 0;">{{ ${title} }}</h2>
        <p id="stwl-confirm-msg" style="margin: 0; color: #6b7280;">{{ ${message} }}</p>
      </div>
      <div class="stwlite-tw-flex stwlite-tw-gap-3 stwlite-tw-mt-6">
        <button
          type="button"
          data-testid="stwl-confirm-cancel"
          class="stwlite-tw-flex-1 stwlite-tw-py-2 stwlite-tw-px-4 stwlite-tw-rounded stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-bg-white stwlite-tw-text-gray-700 hover:stwlite-tw-bg-gray-100 stwlite-tw-cursor-pointer"
          @click="${onCancel}"
        >
          {{ ${cancelText} }}
        </button>
        <button
          type="button"
          data-testid="stwl-confirm-accept"
          class="stwlite-tw-flex-1 stwlite-tw-py-2 stwlite-tw-px-4 stwlite-tw-rounded stwlite-tw-border-0 stwlite-tw-bg-red-600 stwlite-tw-text-white hover:stwlite-tw-bg-red-700 stwlite-tw-cursor-pointer"
          @click="${onConfirm}"
          :disabled="${disabled}"
        >
          {{ ${confirmText} }}
        </button>
      </div>
    </div>
  </div>
`

export default confirmationModalTemplate