import React from 'react';
import { createRoot } from 'react-dom/client';
import CategoryPillCarousel from './components/gallery/CategoryPillCarousel';

function mountAll() {
  document.querySelectorAll('[data-react-pill-carousel]').forEach((container) => {
    if (container.dataset.reactMounted) return;
    container.dataset.reactMounted = '1';

    let items = [];
    try {
      items = JSON.parse(container.dataset.items || '[]');
    } catch {
      items = [];
    }

    createRoot(container).render(
      <CategoryPillCarousel
        items={items}
        ariaLabel={container.dataset.ariaLabel || 'Filter by category'}
        className={container.dataset.className || ''}
      />,
    );
  });
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', mountAll);
} else {
  mountAll();
}