import { Button } from '../atoms/button.js'
import { Link } from '../atoms/link.js'
import h from '../shared/h.js'

export function Links ({ _model, _variant, ...props }) {
  const { links } = _model

  if (links.length === 0) {
    return null
  }

  // Render as button if one link is present.
  if (links.length === 1 && !_variant) {
    return h(Button, { _model: links[0] })
  }

  // Render as list of links if more than one link.
  return h('div', { ...props, role: 'list', className: 'space-y-2' }, links.map(link =>
    h('div', { role: 'listitem' },
      h(Link, { _model: link, _variant: _variant ?? 'full' })
    )
  ))
}
