component Link {
  props {
    size = "default"
    color = "primary"
    label = "Link"
    href = "#"
    target = ""
    rel = ""
    external = false
    class = ""
  }

  view {
    <a
      data-ui-component="Link"
      href='{href}'
      target='{target}'
      rel='{external ? (rel || "noopener noreferrer") : rel}'
      class='inline-flex min-w-0 items-center gap-1.5 rounded-md font-semibold underline-offset-4 outline-none transition-colors 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}'
      class:text-xs='size === "xs"'
      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:hover:text-[var(--wire-color-secondary-hover)]='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:hover:underline='external === false'
    >
      <span class="truncate">{label}</span>

      {#if external}
        <span
          class="icon-[lucide--external-link] size-3.5 shrink-0"
          aria-hidden="true"
        ></span>
      {/if}

      <slot></slot>
    </a>
  }
}