import ReactDOM from 'react-dom';
import type { ComponentType } from 'react';
import React, { StrictMode } from 'react';
import type { MountableExtension } from '@atlassian/clientside-extensions';

function renderElementAsReact<PropsT extends React.JSX.IntrinsicAttributes>(
    renderApi: MountableExtension,
    RenderElement: ComponentType<PropsT>,
    additionalProps?: unknown,
) {
    renderApi
        .onMount((element) => {
            // eslint-disable-next-line react/jsx-props-no-spreading
            ReactDOM.render(
                <StrictMode>
                    <RenderElement {...(additionalProps as PropsT)} />
                </StrictMode>,
                element,
            );
        })
        .onUnmount((element) => {
            ReactDOM.unmountComponentAtNode(element);
        });
}

export default renderElementAsReact;