import type { ReactNode } from 'react'
import { useMemo } 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) {
	const content = children ?? url
	if (supportsHyperlinks()) {
		return useMemo(
			() => (
				<Text>
					<ink-link href={url}>{content}</ink-link>
				</Text>
			),
			[content, url],
		)
	}
	const displayed = fallback ?? content
	return useMemo(() => <Text>{displayed}</Text>, [displayed])
}