import { Box } from '../atoms/box.js'
import { Card } from '../atoms/card.js'
import { Heading } from '../atoms/heading.js'
import { LinkText } from '../atoms/link-text.js'
import { RichText } from '../atoms/rich-text.js'
import { Time } from '../atoms/time.js'
import { Asset } from '../molecules/asset.js'
import { ValidationError } from '../routing/error-handler.js'
import h from '../shared/h.js'
import idFromString from '../shared/id-from-string.js'

export function PromoCard ({ _model, ...props }) {
  const { image, video, title, links, text, date } = _model
  if (!title || !links || links.length === 0) {
    throw new ValidationError()
  }

  return h(Card, {
    ...props,
    _model: { value: links[0].value },
    children: h('div',
      { className: 'flex flex-col h-full' },
      Boolean(image?.src || video?.src) && h(Asset, { _model }),
      h(Box,
        h(Heading, { _level: 3, id: idFromString(title) },
          h(LinkText, { _model: { name: title, value: links[0].value } })
        ),
        date && h(Time, { _time: date }),
        text && h(RichText, text)
      )
    )
  })
}
