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='wire-text-link {class}'
    >
      {#if disabled}
        <span
          aria-disabled="true"
          class="wire-text-link__control"
          data-size='{size}'
        >
          {#if icon && iconPosition === "start"}
            <span class='{icon + " wire-text-link__icon"}' aria-hidden="true"></span>
          {/if}
          <span>{label}</span>
        </span>
      {:else}
        <a
          href='{href}'
          target='{target}'
          rel='{external ? (rel || "noopener noreferrer") : rel}'
          class="wire-text-link__control"
          data-size='{size}'
          data-color='{color}'
          data-variant='{variant}'
          data-underline='{underline ? "true" : "false"}'
        >
          {#if icon && iconPosition === "start"}
            <span class='{icon + " wire-text-link__icon"}' aria-hidden="true"></span>
          {/if}

          <span>{label}</span>

          {#if icon && iconPosition === "end"}
            <span class='{icon + " wire-text-link__icon"}' aria-hidden="true"></span>
          {/if}

          {#if external}
            <span class="icon-[lucide--external-link] wire-text-link__icon" aria-hidden="true"></span>
          {:else if showArrow}
            <span class="icon-[lucide--arrow-right] wire-text-link__icon wire-text-link__arrow" aria-hidden="true"></span>
          {/if}
        </a>
      {/if}
    </span>
  }

  style {
    .wire-text-link {
      display: inline-flex;
      min-width: 0;
    }

    .wire-text-link__control {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      border-radius: var(--wire-radius-sm);
      color: var(--wire-color-primary);
      font-weight: 600;
      outline: none;
      transition: color var(--wire-motion-base) var(--wire-ease-standard);
    }

    span.wire-text-link__control {
      cursor: not-allowed;
      opacity: 0.5;
    }

    .wire-text-link__control[data-size="sm"],
    .wire-text-link__control[data-size="default"] { font-size: 0.875rem; }
    .wire-text-link__control[data-size="md"] { font-size: 1rem; }
    .wire-text-link__control[data-size="lg"] { font-size: 1.125rem; }
    .wire-text-link__control[data-color="secondary"] { color: var(--wire-color-secondary); }
    .wire-text-link__control[data-color="success"] { color: var(--wire-color-success); }
    .wire-text-link__control[data-color="warning"] { color: var(--wire-color-warning-text); }
    .wire-text-link__control[data-color="danger"] { color: var(--wire-color-danger); }
    .wire-text-link__control[data-color="info"] { color: var(--wire-color-info); }
    .wire-text-link__control[data-color="neutral"] { color: var(--wire-color-text); }
    .wire-text-link__control[data-color="primary"]:hover { color: var(--wire-color-primary-hover); }
    .wire-text-link__control[data-underline="true"] {
      text-decoration: underline;
      text-underline-offset: 0.25rem;
    }
    .wire-text-link__control[data-variant="button"] {
      padding: 0.5rem 0.75rem;
      border-radius: var(--wire-radius);
    }
    .wire-text-link__control[data-variant="button"][data-color="primary"] {
      background: var(--wire-color-primary-soft);
    }
    .wire-text-link__control:focus-visible {
      outline: 2px solid var(--wire-color-focus);
      outline-offset: 2px;
    }
    .wire-text-link__icon { width: 1rem; height: 1rem; flex: none; }
    .wire-text-link__arrow { transition: transform var(--wire-motion-base) var(--wire-ease-standard); }
    .wire-text-link__control:hover .wire-text-link__arrow { transform: translateX(0.25rem); }
  }
}