import React from 'react';
import ReactDOM from 'react-dom/client';
import { ChakraProvider, extendTheme } from '@chakra-ui/react';
import TranslatorWidget from './components/TranslatorWidget';

// Custom theme (simplified version)
const theme = extendTheme({
  colors: {
    brand: {
      50: '#eff6ff',
      100: '#dbeafe', 
      200: '#bfdbfe',
      300: '#93c5fd',
      400: '#60a5fa',
      500: '#3b82f6',
      600: '#2563eb',
      700: '#1d4ed8',
      800: '#1e40af',
      900: '#1e3a8a',
    },
  }
});

// Initialize shortcode widgets
document.addEventListener('DOMContentLoaded', function() {
  // Find all translator widget containers
  const containers = document.querySelectorAll('.fluentc-translator-widget');
  
  containers.forEach(container => {
    if (container.id) {
      const root = ReactDOM.createRoot(container);
      root.render(
        <ChakraProvider theme={theme}>
          <TranslatorWidget />
        </ChakraProvider>
      );
    }
  });
}); 