import { createApp, h, shallowRef } from 'vue'
import type { JsWidgetProps, JsWidgetRenderer } from '@filament/widgets/js-widget'
import {{ componentIdentifier }} from './{{ componentName }}.vue'

type Configuration = { heading?: string; description?: string }

const mount{{ componentName }}: JsWidgetRenderer<Configuration> = ({ host, props: initialProps }) => {
    const props = shallowRef<JsWidgetProps<Configuration>>(initialProps)
    const application = createApp({ setup: () => () => h({{ componentIdentifier }}, props.value) })
    application.mount(host)

    return {
        update: (nextProps) => { props.value = nextProps },
        destroy: () => application.unmount(),
    }
}

export default mount{{ componentName }}