import { Asset } from '#amidala/main/molecules/asset.js'
import { PromoText } from '#amidala/main/molecules/promo-text.js'
import h from '#amidala/main/shared/h.js'
import { Grid } from './grid.js'

export function Section (props) {
  const { _model } = props

  return h('div', {
    ...props,
    className: 'text-txa bg-bga grid grid-cols-1',
    // The first section should not have a top padding. That's where the Breadcrumb sits.
    _style: id => `
      :first-child > ${id} > div {
        padding-top: 0;
      }
    `,
    children: [
      _model?.image?.src && h('div', { className: 'row-start-1 col-start-1 col-span-12' },
        h(Asset, { _model, _tall: true, role: 'presentation' })
      ),
      h('div', { className: 'relative max-w-page m-auto w-full row-start-1 col-start-1 px-3 py-12 space-y-5' },
        h(PromoText, { _model, _level: 2, _align: 'center' }),
        h(Grid, { ...props, _tag: 'section', _gap: true })
      )
    ]
  })
}
