import './bootstrap';

import Alpine from 'alpinejs';
import React from 'react';
import { createRoot } from 'react-dom/client';
import AvatarUploader from './components/profile/AvatarUploader';

window.Alpine = Alpine;

Alpine.start();

document.querySelectorAll('[data-avatar-uploader="true"]').forEach((element) => {
	const uploadUrl = element.getAttribute('data-upload-url') || '';
	const initialSrc = element.getAttribute('data-initial-src') || '';
	const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

	createRoot(element).render(
		React.createElement(AvatarUploader, {
			uploadUrl,
			initialSrc,
			csrfToken,
		})
	);
});