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

  view {
    <Card {...attrs} title='{title}' description='{description}' color='{color}' size='{size}' class='w-full max-w-xl {class}' data-wrnexus-runtime="auth" data-auth-recovery-codes data-recovery-filename="wrnexus-recovery-codes.txt">
      <Alert title="Keep these codes private" description="Anyone with a recovery code may be able to access your account." icon="icon-[lucide--shield-alert]" color="warning" variant="soft" size="sm" />
      <div data-recovery-code-list class="mt-4 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" label='{downloadLabel}' icon="icon-[lucide--download]" variant="outline" color='{color}' size='{size}' data-recovery-download />
        <form method="post" action='{regenerateAction}' data-schema='{schema}' novalidate class="min-w-48 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 text-xs text-[var(--wire-color-success)]">{successMessage}</p>
          <Button type="submit" label='{regenerateLabel}' icon="icon-[lucide--refresh-cw]" variant="outline" color='{color}' size='{size}' fullWidth="true" />
        </form>
      </div>
    </Card>
  }
}