<Link />

import { TextProps } from 'react-native'

export interface LinkProps extends TextProps {
  children?: React.ReactNode
  
  /** Path to navigate to. */
  href: Href

  /** Forward props to child component. Useful for custom buttons. */
  asChild?: boolean

  /** Replace the current route without adding to the history. */
  replace?: boolean

  /** Should push the current route  */
  push?: boolean

  /** On web, this sets the HTML `class` directly. On native, no-op or can be used via a compile-time plugin. */
  className?: string

  onPress?: (e:
    React.MouseEvent<HTMLAnchorElement, MouseEvent>
    | GestureResponderEvent
  ) => void

  /**
   * **Web only:** Specifies where to open the `href`.
   *
   * - **_self**: the current tab.
   * - **_blank**: opens in a new tab or window.
   * - **_parent**: opens in the parent browsing context. If no parent, defaults to **_self**.
   * - **_top**: opens in the highest browsing context ancestor. If no ancestors, defaults to **_self**.
   *
   * This property is passed to the underlying anchor (`<a>`) tag.
   *
   * @default '_self'
   *
   * @example
   * <Link href="https://tamagui.dev" target="_blank">Open in new tab</Link>
   */
  target?: '_self' | '_blank' | '_parent' | '_top' | string

  /**
   * **Web only:** Specifies the relationship between the `href` and the current route.
   *
   * Common values:
   * - **nofollow**: Indicates to search engines that they should not follow the `href`. This is often used for user-generated content or links that should not influence search engine rankings.
   * - **noopener**: Suggests that the `href` should not have access to the opening window's `window.opener` object, which is a security measure to prevent potentially harmful behavior in cases of links that open new tabs or windows.
   * - **noreferrer**: Requests that the browser not send the `Referer` HTTP header when navigating to the `href`. This can enhance user privacy.
   *
   * The `rel` property is primarily used for informational and instructive purposes, helping browsers and web
   * crawlers make better decisions about how to handle and interpret the links on a web page. It is important
   * to use appropriate `rel` values to ensure that links behave as intended and adhere to best practices for web
   * development and SEO (Search Engine Optimization).
   *
   * This property is passed to the underlying anchor (`<a>`) tag.
   *
   * @example
   * <Link href="https://tamagui.dev" rel="nofollow">Open</Link>
   */
  rel?: string

  /**
   * **Web only:** Specifies that the `href` should be downloaded when the user clicks on the link,
   * instead of navigating to it. It is typically used for links that point to files that the user should download,
   * such as PDFs, images, documents, etc.
   *
   * The value of the `download` property, which represents the filename for the downloaded file.
   * This property is passed to the underlying anchor (`<a>`) tag.
   *
   * @example
   * <Link href="/image.jpg" download="my-image.jpg">Download image</Link>
   */
  download?: string

  /**
   * **Web only:** Display a different URL in the browser address bar than the actual route.
   * Useful for modals, side panels, or keeping URLs clean while navigating to complex routes.
   *
   * When the user navigates back/forward, the actual route will be restored from history.
   *
   * @example
   * <Link href="/photos/5/modal" mask="/photos/5">View Photo</Link>
   */
  mask?: Href
}

import { Link } from 'one'

export function ProfileLink() {
  return (
    <Link href="/profile" asChild>
      <Link.Trigger>
        <Pressable>
          <Text>View Profile</Text>
        </Pressable>
      </Link.Trigger>
      <Link.Preview />
    </Link>
  )
}

<Link href="/user/123" asChild>
  <Link.Trigger>
    <UserCard />
  </Link.Trigger>
  <Link.Preview style={{ width: 300, height: 200 }}>
    <UserPreviewCard userId="123" />
  </Link.Preview>
</Link>

<Link href="/photo/456" asChild>
  <Link.Trigger>
    <PhotoThumbnail />
  </Link.Trigger>
  <Link.Preview />
  <Link.Menu>
    <Link.MenuAction icon="star" onPress={handleFavorite}>
      Add to Favorites
    </Link.MenuAction>
    <Link.MenuAction icon="square.and.arrow.up" onPress={handleShare}>
      Share
    </Link.MenuAction>
    <Link.MenuAction icon="trash" destructive onPress={handleDelete}>
      Delete
    </Link.MenuAction>
  </Link.Menu>
</Link>

<Link.Menu>
  <Link.MenuAction icon="heart" onPress={handleLike}>
    Like
  </Link.MenuAction>
  <Link.Menu title="More" icon="ellipsis.circle">
    <Link.MenuAction icon="flag" onPress={handleReport}>
      Report
    </Link.MenuAction>
    <Link.MenuAction icon="eye.slash" onPress={handleHide}>
      Hide
    </Link.MenuAction>
  </Link.Menu>
</Link.Menu>

import { useIsPreview } from 'one'

function MyComponent() {
  const isPreview = useIsPreview()

  if (isPreview) {
    // Render simplified version for preview
    return <SimplifiedView />
  }

  return <FullView />
}