const { h, register, matter, preactHooks } = globalThis.ami
const { Box, Heading } = matter
const { useState, useEffect } = preactHooks

// Create Preact component based on hooks.
function MyPreactComponent ({ src }) {
  const [data, setData] = useState()

  // The src parameter is a URL to the data feed.
  // It can be configured by an editor for each instance of the component.
  if (!src) {
    console.error('Missing data source.')
    return null
  }

  // Fetch the data source.
  useEffect(() => {
    (async () => {
      const res = await fetch(src)
      const json = await res.json()
      setData(json)
    })()
  }, [])

  // Shape the HTML output.
  // This is a hyperscript syntax; feel free to use JSX.
  return h(Box, { className: 'bg-bga text-txa w-full h-full rounded-2xl overflow-hidden' },
    h(Box, { className: 'pal-brand3-solid bg-bga text-txa h-full rounded-lg text-center' },
      h(Heading, { _level: 3 }, data ? data.title : 'Fetching data...')
    )
  )
}

register(MyPreactComponent, 'example-web-component')
