import type { ReactNode } from 'react'
import React from 'react'
import { supportsHyperlinks } from '../core/supports-hyperlinks.js'
import Text from './Text.js'

export type Props = {
  readonly children?: ReactNode
  readonly url: string
  readonly fallback?: ReactNode
}

export default function Link({
  children,
  url,
  fallback,
}: Props): React.ReactNode {
  // Use children if provided, otherwise display the URL
  const content = children ?? url

  if (supportsHyperlinks()) {
    // Wrap in Text to ensure we're in a text context
    // (ink-link is a text element like ink-text)
    return (
      <Text>
        <ink-link href={url}>{content}</ink-link>
      </Text>
    )
  }

  return <Text>{fallback ?? content}</Text>
}