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'

const RIGHT_COL = 8
const LEFT_COL = 2

export function PromoBanner ({ _model, _variant, _color, ...props }) {
  const { text, title, asset } = _model
  if (!title || !text || !asset.src) {
    throw new ValidationError()
  }

  const isRight = _variant === 'right'

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