import { mount, unmount } from 'svelte'
import type { JsFieldProps, JsFieldRenderer } from '@filament/forms/js-field'
import {{ componentIdentifier }} from './{{ componentName }}.svelte'

const mount{{ componentName }}: JsFieldRenderer<string | null> = ({ host, props: initialProps }) => {
    const props = $state<JsFieldProps<string | null>>({ ...initialProps })
    const component = mount({{ componentIdentifier }}, { target: host, props })

    return {
        update: (nextProps) => {
            Object.assign(props, nextProps)
        },
        destroy: () => unmount(component),
    }
}

export default mount{{ componentName }}