import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { CharacterPurchaseForm } from '../components/CharacterPurchaseForm'

// Entry genérico para todos los servicios de personaje de pago. La plantilla
// configura el formulario con data-* y una lista de personajes en json_script.
const el = document.getElementById('character-purchase-app')
if (el) {
  const dataEl = document.getElementById('character-purchase-data')
  const characters: string[] = dataEl ? JSON.parse(dataEl.textContent || '[]') : []
  createRoot(el).render(
    <StrictMode>
      <CharacterPurchaseForm
        url={el.dataset.url || ''}
        csrfToken={el.dataset.csrf || ''}
        characters={characters}
        price={el.dataset.price || ''}
        label={el.dataset.label || 'Comprar'}
        field={el.dataset.field || 'character'}
        buttonClass={el.dataset.buttonClass || 'rename-button'}
      />
    </StrictMode>,
  )
}
