import { createRoot } from 'react-dom/client'
import React, { FC, StrictMode } from 'react'
import { DevTools } from '@ta-interaktiv/microfrontend-devtools'
import { MicroFrontendProps } from '../types/MicroFrontendProps'

export const renderDevComponent = (App: FC<MicroFrontendProps>) => {
  const shadow = document
    .getElementById('root')
    ?.attachShadow({ mode: 'closed' })
  const root = createRoot(shadow!)
  // get all style tags from the head and append them to the shadow dom
  const styleTags = document.querySelectorAll('style')
  styleTags.forEach((styleTag) => {
    shadow?.appendChild(styleTag.cloneNode(true))
  })
  root.render(
    <StrictMode>
      <DevTools MicroFrontend={App} />
    </StrictMode>,
  )
}