import h from '../shared/h.js'
import { TOGGLE_NEWWINDOW } from '../shared/icons.js'
import useLink from '../shared/use-link.js'
import { Icon } from './icon.js'

export function LinkText ({ _model, target: forcedTarget, ...props }) {
  const { name, value } = _model
  const { text, target } = useLink({ href: value, text: name, target: forcedTarget })
  const newWindow = target === '_blank'

  if (!newWindow) {
    return text?.length > 0 ? h('span', text) : null
  }

  return h('span', { ...props, className: 'space-x-1' },
    text?.length > 0 ? h('span', text) : null,
    h('span', { className: 'inline-block align-top' },
      h(Icon, { _size: 'sm' }, TOGGLE_NEWWINDOW)
    )
  )
}
