import { Button } from '../atoms/button.js'
import { ValidationError } from '../routing/error-handler.js'
import h from '../shared/h.js'

const MAX_LINKS = 3
const COL_COUNT = 6
const COL_SPAN = 2

export function CallToAction ({ _model, _variant, ...props }) {
  const links = _model.links.slice(0, MAX_LINKS)
  if (links.length === 0) {
    throw new ValidationError()
  }

  const isStacked = _variant === 'stacked'
  const colstart = isStacked ? 'auto' : (COL_COUNT + 1) - COL_SPAN * links.length
  const className = `p-6 bg-bga text-txa rounded-2xl flex flex-col gap-5 ${isStacked ? '' : 'lg:grid lg:grid-cols-12'}`

  return h('div', { ...props, className }, links.map((link, ii) =>
    h('div', { className: `w-full col-span-4 col-start-${ii === 0 ? colstart : 'auto'}` },
      h(Button, { _model: link, _wide: true })
    ))
  )
}
