component TextLink {
  outputs {
    click(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
    focus(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
    blur(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
  }

  props {
label: string = "Learn more"
    href: string = "#"
    target: string = ""
    rel: string = ""
    external: boolean = false
    icon: string = ""
    iconPosition: string = "start"
    showArrow: boolean = true
    underline: boolean = false
    size: string = "default"
    color: string = "primary"
    variant: string = "default"
    disabled: boolean = false
    class: string = ""
  }

  view {
    <span
      {...attrs}
      data-ui-component="TextLink"
      data-size='{size}'
      data-color='{color}'
      data-variant='{variant}'
      class='inline-flex min-w-0 {class}'
    >
      {#if disabled}
        <span
          aria-disabled="true"
          class="inline-flex cursor-not-allowed items-center gap-2 font-semibold opacity-50"
          class:text-sm='size === "sm" || size === "default"'
          class:text-base='size === "md"'
          class:text-lg='size === "lg"'
        >
          {#if icon && iconPosition === "start"}
            <span class='{icon + " size-4 shrink-0"}' aria-hidden="true"></span>
          {/if}
          <span>{label}</span>
        </span>
      {:else}
        <a
          href='{href}'
          target='{target}'
          rel='{external ? (rel || "noopener noreferrer") : rel}'
          class="group inline-flex items-center gap-2 rounded-md font-semibold outline-none transition focus-visible:ring-2 focus-visible:ring-[var(--wire-color-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--wire-color-background)]"
          class:text-sm='size === "sm" || size === "default"'
          class:text-base='size === "md"'
          class:text-lg='size === "lg"'
          class:text-[var(--wire-color-primary)]='color === "primary"'
          class:hover:text-[var(--wire-color-primary-hover)]='color === "primary"'
          class:text-[var(--wire-color-secondary)]='color === "secondary"'
          class:text-[var(--wire-color-success)]='color === "success"'
          class:text-[var(--wire-color-warning-text)]='color === "warning"'
          class:text-[var(--wire-color-danger)]='color === "danger"'
          class:text-[var(--wire-color-info)]='color === "info"'
          class:text-[var(--wire-color-text)]='color === "neutral"'
          class:underline='underline'
          class:underline-offset-4='underline'
          class:rounded-lg='variant === "button"'
          class:bg-[var(--wire-color-primary-soft)]='variant === "button" && color === "primary"'
          class:px-3='variant === "button"'
          class:py-2='variant === "button"'
        >
          {#if icon && iconPosition === "start"}
            <span class='{icon + " size-4 shrink-0"}' aria-hidden="true"></span>
          {/if}

          <span>{label}</span>

          {#if icon && iconPosition === "end"}
            <span class='{icon + " size-4 shrink-0"}' aria-hidden="true"></span>
          {/if}

          {#if external}
            <span class="icon-[lucide--external-link] size-4 shrink-0" aria-hidden="true"></span>
          {:else if showArrow}
            <span class="icon-[lucide--arrow-right] size-4 shrink-0 transition-transform group-hover:translate-x-1" aria-hidden="true"></span>
          {/if}
        </a>
      {/if}
    </span>
  }
}