component SignInLink {
  props {
    label = "Sign in with password"
    description = "Use your username or email and password"
    href = ""
    type = "button"
    variant = "secondary"
    disabled = false
    icon = "icon-[lucide--lock-keyhole]"
    tone = "password"
    class = ""
  }
  view {
    <span class="wire-catalog-action wire-auth-action {class}">
      {#if href}
        <a href="{href}" class="wire-btn wire-btn--{variant}">
          <span class="wire-auth-action__icon wire-auth-action__icon--{tone}">{#if tone == "account"}<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 19a6 6 0 0 0-12 0M9 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8M19 8v6M16 11h6" /></svg>{:else}<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10V7a5 5 0 0 1 10 0v3M6 10h12a2 2 0 0 1 2 2v8H4v-8a2 2 0 0 1 2-2ZM12 14v2" /></svg>{/if}</span>
          <span class="wire-auth-action__copy"><span class="wire-auth-action__label">{label}</span>{#if description}<span class="wire-auth-action__description">{description}</span>{/if}</span>
          <svg class="wire-auth-action__arrow" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>
        </a>
      {:else}
        <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">
          <span class="wire-auth-action__icon wire-auth-action__icon--{tone}">{#if tone == "account"}<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 19a6 6 0 0 0-12 0M9 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8M19 8v6M16 11h6" /></svg>{:else}<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10V7a5 5 0 0 1 10 0v3M6 10h12a2 2 0 0 1 2 2v8H4v-8a2 2 0 0 1 2-2ZM12 14v2" /></svg>{/if}</span>
          <span class="wire-auth-action__copy"><span class="wire-auth-action__label">{label}</span>{#if description}<span class="wire-auth-action__description">{description}</span>{/if}</span>
          <svg class="wire-auth-action__arrow" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>
        </button>
      {/if}
    </span>
  }
}