// Link -- a text link that follows the theme.
//
//   <Link href="/docs" label="Documentation" />
//   <Link href="https://example.com" label="Spec" external={true} />
//
// external adds rel="noopener noreferrer" and an outbound icon, so the reader
// is told the link leaves the site before they follow it.
//
// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
// and silently swallows the rule that follows it.
component Link {
  props {
    size: string = "default"
    color: string = "primary"
    label: string = "Link"
    href: string = "#"
    target: string = ""
    rel: string = ""
    underline: string = "hover"
    external: boolean = false
    class: string = ""
  }

  view {
    <a
      {...attrs}
      data-ui-component="Link"
      class='wrn-link {class}'
      href='{href}'
      target='{target}'
      rel='{external ? (rel || "noopener noreferrer") : rel}'
      data-size='{size}'
      data-color='{color}'
      data-underline='{underline}'
      data-external='{external}'
    >
      <span class="wrn-link__label">{label}</span>
      <span
        class="icon-[lucide--external-link] wrn-link__icon"
        data-show="external"
        aria-hidden="true"
      ></span>
      <slot></slot>
    </a>
  }

  style {
    .wrn-link {
      --link-tone: var(--wrn-color-primary);
      --link-tone-hover: var(--wrn-color-primary-hover);
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      min-width: 0;
      border-radius: var(--wrn-radius-sm);
      color: var(--link-tone);
      font-size: 0.875rem;
      font-weight: 600;
      text-decoration: none;
      text-underline-offset: 4px;
      transition: color 140ms ease;
    }

    .wrn-link[data-color="secondary"] {
      --link-tone: var(--wrn-color-secondary);
      --link-tone-hover: var(--wrn-color-secondary-hover);
    }

    .wrn-link[data-color="success"] {
      --link-tone: var(--wrn-color-success);
      --link-tone-hover: var(--wrn-color-success);
    }

    .wrn-link[data-color="warning"] {
      --link-tone: var(--wrn-color-warning-text);
      --link-tone-hover: var(--wrn-color-warning-text);
    }

    .wrn-link[data-color="danger"] {
      --link-tone: var(--wrn-color-danger);
      --link-tone-hover: var(--wrn-color-danger);
    }

    .wrn-link[data-color="info"] {
      --link-tone: var(--wrn-color-info);
      --link-tone-hover: var(--wrn-color-info);
    }

    .wrn-link[data-color="neutral"] {
      --link-tone: var(--wrn-color-text);
      --link-tone-hover: var(--wrn-color-text);
    }

    .wrn-link[data-size="xs"] {
      font-size: 0.75rem;
    }

    .wrn-link[data-size="md"] {
      font-size: 1rem;
    }

    .wrn-link[data-size="lg"] {
      font-size: 1.125rem;
    }

    .wrn-link[data-underline="always"] {
      text-decoration: underline;
    }

    .wrn-link[data-underline="hover"]:hover {
      text-decoration: underline;
    }

    .wrn-link:hover {
      color: var(--link-tone-hover);
    }

    .wrn-link:focus-visible {
      outline: 2px solid var(--wrn-color-focus);
      outline-offset: 2px;
    }

    /* The label truncates; the outbound icon must not shrink with it. */
    .wrn-link__label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .wrn-link__icon {
      flex: 0 0 auto;
      width: 0.875rem;
      height: 0.875rem;
    }
  }
}