import { Img } from '../atoms/img.js'
import { Link } from '../atoms/link.js'
import { RichText } from '../atoms/rich-text.js'
import { ValidationError } from '../routing/error-handler.js'
import h from '../shared/h.js'

export function Author ({ _model, ...props }) {
  const { image, links, text } = _model
  if (links.length === 0) {
    throw new ValidationError()
  }

  return h('div', { ...props, className: 'bg-bga text-txa rounded-2xl flex flex-row p-6 gap-3' },
    image.src && h('div', { className: 'shrink-0 w-12 h-12 rounded-full overflow-hidden' },
      h(Img, { _model: image, _tall: true })
    ),
    h('div', { className: 'grow space-y-2' },
      h('div', { className: 'font-custom font-bold text-lg' },
        ...links.flatMap(link => [
          link.value
            ? h(Link, { _model: link })
            : link.name,
          ', '
        ]).slice(0, -1)
      ),
      h(RichText, text)
    )
  )
}
