component RecoveryCodes {
  props {
    codes = []
    schema = "auth-recovery-codes"
    title = "Recovery codes"
    description = "Store these codes somewhere safe. Each code can be used once."
    downloadLabel = "Download codes"
    regenerateLabel = "Generate new codes"
    regenerateAction = "/api/auth/recovery-codes"
    successMessage = "New recovery codes generated. Previous unused codes are no longer valid."
    count = 10
    color = "primary"
    size = "md"
    class = ""
  }

  view {
    <section
      {...attrs}
      data-wrnexus-runtime="auth"
      data-auth-recovery-codes
      data-recovery-filename="wrnexus-recovery-codes.txt"
      class='w-full max-w-xl rounded-[var(--wire-radius-lg)] border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-6 {class}'
    >
      <div class="flex items-start justify-between gap-4">
        <div>
          <h2 class="m-0 text-xl font-semibold">{title}</h2>
          <p class="mt-1 text-sm text-[var(--wire-color-muted)]">{description}</p>
        </div>
        <span class="icon-[lucide--shield-keyhole] size-6 text-[var(--wire-color-primary)]"></span>
      </div>

      <div
        data-recovery-code-list
        class="mt-5 grid grid-cols-2 gap-2 rounded-[var(--wire-radius-sm)] bg-[var(--wire-color-surface-2)] p-4 font-mono text-sm sm:grid-cols-3"
      >
        {#each codes as code}
          <code
            data-recovery-code
            class="rounded bg-[var(--wire-color-surface)] px-2 py-1.5 text-center"
          >{code}</code>
        {/each}
      </div>

      <div class="mt-4 flex flex-wrap gap-2">
        <button
          type="button"
          data-recovery-download
          class="h-10 rounded-[var(--wire-radius-sm)] border border-[var(--wire-color-border)] px-4 text-sm font-semibold"
        >
          {downloadLabel}
        </button>

        <form
          method="post"
          action='{regenerateAction}'
          data-schema='{schema}'
          novalidate
          class="flex-1"
        >
          <input type="hidden" name="count" value='{count}' />
          <p data-error="count" class="m-0 min-h-4 text-xs text-[var(--wire-color-danger)]"></p>
          <p
            data-error="_form"
            role="alert"
            class="m-0 hidden text-xs text-[var(--wire-color-danger)]"
          ></p>
          <p
            data-success='{successMessage}'
            role="status"
            hidden
            class="m-0 rounded-[var(--wire-radius-sm)] bg-[color-mix(in_srgb,var(--wire-color-success)_10%,transparent)] p-3 text-xs text-[var(--wire-color-success)]"
          >
            {successMessage}
          </p>
          <button
            type="submit"
            class="h-10 w-full rounded-[var(--wire-radius-sm)] border border-[var(--wire-color-border)] px-4 text-sm font-semibold disabled:cursor-wait disabled:opacity-60"
          >
            {regenerateLabel}
          </button>
        </form>
      </div>
    </section>
  }
}