component PasskeyButton {
  outputs {
    passkeyRegistered(payload: { credentialId: string; response?: object })
    passkeyAuthenticated(payload: { userId?: string; sessionId?: string; response?: object })
    error(payload: { code: string; message: string })
  }

  props {
    mode: string = "authenticate"
    label: string = "Continue with a passkey"
    registerLabel: string = "Add a passkey"
    identifier: string = ""
    rpId: string = ""
    rpName: string = "WRNexusJS"
    passkeyName: string = "Passkey"
    optionsEndpoint: string = ""
    verifyEndpoint: string = ""
    redirect: string = ""
    mfaHref: string = "/two-factor"
    conditional: boolean = false
    fullWidth: boolean = false
    loadingMessage: string = "Waiting for your passkey…"
    successMessage: string = "Passkey verified."
    color: string = "primary"
    size: string = "md"
    class: string = ""
  }

  view {
    <div {...attrs} data-wrnexus-runtime="auth" data-auth-passkey='{mode}' data-identifier='{identifier}' data-rp-id='{rpId}' data-rp-name='{rpName}' data-passkey-name='{passkeyName}' data-options-endpoint='{optionsEndpoint}' data-verify-endpoint='{verifyEndpoint}' data-redirect='{redirect}' data-mfa-href='{mfaHref}' data-conditional='{conditional}' data-loading-message='{loadingMessage}' data-success-message='{successMessage}' data-auth-state="idle" aria-busy="false" class='space-y-2 {class}'>
      <Button
        type="button"
        label='{mode == "register" ? registerLabel : label}'
        icon="icon-[lucide--key-round]"
        variant="outline"
        color='{color}'
        size='{size}'
        fullWidth='{fullWidth}'
      />
      <p data-auth-status hidden role="status" class="m-0 text-xs text-[var(--wire-color-muted)]"></p>
    </div>
  }
}