import { Heading } from '../atoms/heading.js'
import { Asset } from '../molecules/asset.js'
import { ValidationError } from '../routing/error-handler.js'
import h from '../shared/h.js'

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

  // StandaloneAsset should inherit parent colour.
  return h('div', { ...props, _color: null, className: 'space-y-2' }, [
    title && h(Heading, { _level: 3 }, title),
    h('figure', { className: 'col-span-2 space-y-2' },
      h('div', { className: 'rounded-2xl overflow-hidden' },
        h(Asset, { _model })
      ),
      asset.caption && h('figcaption', asset.caption)
    )
  ])
}
