import React from 'react';
import { createRoot } from 'react-dom/client';
import ProfileCharts from './components/ProfileCharts';
import BattleDialog from './components/BattleDialog';
import AvatarUpload from './components/AvatarUpload';

const avatarRoot = document.getElementById('profile-avatar-root');
if (avatarRoot) {
  const { uploadUrl, thumbUrl, initials } = avatarRoot.dataset;
  createRoot(avatarRoot).render(
    <AvatarUpload
      uploadUrl={uploadUrl}
      initialThumbUrl={thumbUrl || null}
      initials={initials}
    />,
  );
}

const chartsRoot = document.getElementById('profile-charts-root');
if (chartsRoot) {
  createRoot(chartsRoot).render(
    <ProfileCharts chartData={JSON.parse(chartsRoot.dataset.chartData)} />,
  );
}

const battleRoot = document.getElementById('profile-battle-root');
if (battleRoot) {
  createRoot(battleRoot).render(
    <BattleDialog games={JSON.parse(battleRoot.dataset.games)} />,
  );
}