import { Asset } from '../molecules/asset.js'
import { PromoText } from '../molecules/promo-text.js'
import { ValidationError } from '../routing/error-handler.js'
import disableTransparency from '../shared/disable-transparency.js'
import h from '../shared/h.js'

export function PageHeaderBanner ({ _model, ...props }) {
  const { title, asset, image, video } = _model
  if (!title || !asset.src) {
    throw new ValidationError()
  }

  return h('div', { ...props, className: `relative h-full overflow-hidden lg:grid lg:grid-cols-12 bg-bga text-txa gap-x-5 rounded-2xl ${disableTransparency(props._color)}` },
    h('div', { className: 'row-start-1 col-start-1 col-span-12 lg:h-full' },
      h(Asset, {
        _model: { video, image: { ...image, caption: null } },
        _tall: true
      })
    ),
    h('div', { className: 'row-start-1 col-start-2 col-span-5 flex items-center lg:overflow-hidden' },
      h('div', { className: 'rounded-xl bg-bga text-txa relative' },
        h(PromoText, { _model: { ..._model, date: null }, _level: 1 })
      )
    )
  )
}
