import React from 'react'
import { createRoot } from 'react-dom/client'
import type { JsComponentProps, JsComponentRenderer } from '@filament/schemas/js-component'

type Configuration = { message?: string }

function {{ componentIdentifier }}(props: JsComponentProps<Configuration>) {
    return <p>{props.configuration.message ?? 'Your component is ready.'}</p>
}

const mount{{ componentName }}: JsComponentRenderer<Configuration> = ({ host, props: initialProps }) => {
    const root = createRoot(host)
    const update = (props: JsComponentProps<Configuration>) => root.render(<{{ componentIdentifier }} {...props} />)

    update(initialProps)

    return { update, destroy: () => root.unmount() }
}

export default mount{{ componentName }}