import { Box } from '../atoms/box.js'
import { Heading } from '../atoms/heading.js'
import { RichText } from '../atoms/rich-text.js'
import { Time } from '../atoms/time.js'
import { Tags } from '../molecules/tags.js'
import h from '../shared/h.js'
import { Links } from './links.js'

export function PromoText ({ _model, _level = 3, _size, _align, _variant, ...props }) {
  const { title, text, date, links, tags } = _model

  const hasLinks = links.length > 0
  const hasText = text || title

  return (hasText || hasLinks) && h(Box, {
    ...props,
    className: 'break-words',
    _style: id => `${id} table { overflow-wrap: normal; word-break: normal }`,
    children: [
      h(Tags, { _model: { tags } }),
      title && h(Heading, { _level, _size, _align }, title),
      date && h(Time, { _time: date }),
      h(RichText, text),
      h(Links, { _variant, _model: { links } })
    ]
  })
}
