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 { Asset } from '../molecules/asset.js'
import { ValidationError } from '../routing/error-handler.js'
import h from '../shared/h.js'

export function PageHeader ({ _model, _variant, ...props }) {
  const { asset, image, title, text, date } = _model
  if (!title) {
    throw new ValidationError()
  }

  const hasAsset = asset.src

  return h('div', { ...props, className: 'relative lg:grid lg:grid-cols-12 lg:gap-x-5 w-full md:rounded-2xl sm:rounded-2xl overflow-hidden' },
    hasAsset && h('div', { className: 'lg:col-span-12 overflow-hidden lg:rounded-2xl', style: 'aspect-ratio: 4 / 1' },
      h(Asset, {
        _model: { ..._model, image: { ...image, caption: null } },
        _tall: true,
      })
    ),
    // The z-0 is required for the text to appear on top of a <video>.
    h(Box, { className: `bg-bga text-txa z-0 lg:rounded-tr-2xl lg:rounded-bl-2xl lg:rounded-br-2xl lg:col-start-1 lg:col-span-8 ${hasAsset ? 'lg:-mt-16' : 'lg:rounded-tl-2xl'}` },
      h(Heading, { _level: 1 }, title),
      date && _variant === 'date' && h(Time, { _time: date }),
      text && h('div', { className: 'text-2xl' },
        h(RichText, text)
      )
    )
  )
}
