import { css } from "@emotion/react";
import type { LinkProps } from "react-router";
import { Link as RouterLink } from "react-router";

/**
 * A styled router link that does not truncate its content by default.
 * For a single-line constrained label, place `Truncate` inside `Link` so the
 * text clips without clipping the link's focus ring.
 */
export function Link(props: LinkProps) {
  return (
    // Stop propagation to prevent the click from being handled by the parent
    <div
      className="link-container"
      onClick={(e) => e.stopPropagation()}
      css={css`
        display: inline-block;
        max-width: 100%;
        min-width: 0;
        color: var(--global-link-color);
      `}
    >
      <RouterLink
        css={css`
          display: inline-block;
          max-width: 100%;
          min-width: 0;
          border-radius: var(--global-rounding-small);
          color: var(--global-link-color);
          &:not(:hover) {
            text-decoration: none;
          }
          &:focus-visible {
            outline: var(--focus-ring-thickness) solid var(--focus-ring-color);
            outline-offset: var(--focus-ring-offset);
          }
        `}
        {...props}
      />
    </div>
  );
}
