import React from 'react';
import { TranslationProvider, useTranslation } from '@logistically/i18n-react-core';

const config = {
  serviceName: 'my-app',
  defaultLocale: 'en',
  supportedLocales: ['en', 'es', 'fr'],
  translationsPath: 'src/translations'
};

const App = () => (
  <TranslationProvider config={config}>
    <MyComponent />
  </TranslationProvider>
);

const MyComponent = () => {
  const { t, locale, setLocale } = useTranslation();
  
  return (
    <div>
      <h1>{t('welcome.title')}</h1>
      <p>{t('welcome.message', { name: 'John' })}</p>
      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
        <option value="en">English</option>
        <option value="es">Español</option>
        <option value="fr">Français</option>
      </select>
    </div>
  );
};

import React from 'react';
import { TranslationProvider, useTranslation } from '@logistically/i18n-react-core';
import { TranslatedTextRN } from '@logistically/i18n-react-core/react-native';

const App = () => (
  <TranslationProvider config={config}>
    <MyNativeComponent />
  </TranslationProvider>
);

const MyNativeComponent = () => {
  const { t, locale } = useTranslation();
  
  return (
    <TranslatedTextRN 
      translationKey="welcome.title"
      style={{ fontSize: 18, fontWeight: 'bold' }}
    />
  );
};

import React from 'react';
import { ReduxTranslationProvider, useReduxTranslation } from '@logistically/i18n-react-core';

const config = {
  serviceName: 'my-app',
  defaultLocale: 'en',
  supportedLocales: ['en', 'es', 'fr', 'ar'],
  translationsPath: 'src/translations',
  pluralization: {
    enabled: true,
    formatNumbers: true,
    useDirectionalMarkers: true
  },
  cache: {
    enabled: true,
    maxSize: 1000,
    ttl: 300000 // 5 minutes
  }
};

const App = () => (
  <ReduxTranslationProvider config={config}>
    <MyReduxComponent />
  </ReduxTranslationProvider>
);

import React from 'react';
import { useReduxTranslation, useReduxTranslationWithMetrics } from '@logistically/i18n-react-core';

// Basic Redux translation hook
const BasicComponent = () => {
  const { t, locale, setLocale, isLoading, error } = useReduxTranslation();
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h1>{t('welcome.title')}</h1>
      <button onClick={() => setLocale('es')}>Switch to Spanish</button>
    </div>
  );
};

// Advanced Redux translation hook with performance metrics
const AdvancedComponent = () => {
  const { 
    t, 
    locale, 
    setLocale, 
    performanceMetrics, 
    pendingActions,
    getPerformanceMetrics,
    isActionPending 
  } = useReduxTranslationWithMetrics();
  
  return (
    <div>
      <h1>{t('welcome.title')}</h1>
      
      {/* Performance Monitoring */}
      <div>
        <h3>Performance Metrics</h3>
        <p>Translation Time: {performanceMetrics.translationTime.toFixed(2)}ms</p>
        <p>Cache Hit Rate: {performanceMetrics.cacheHitRate.toFixed(2)}%</p>
        <p>Pending Actions: {pendingActions.length}</p>
      </div>
      
      {/* Action Status */}
      {isActionPending('loadTranslations') && (
        <div>Loading translations...</div>
      )}
    </div>
  );
};

import { configureStore } from '@reduxjs/toolkit';
import { translationReducer } from '@logistically/i18n-react-core';

// Create your Redux store
const store = configureStore({
  reducer: {
    translation: translationReducer,
    // ... other reducers
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ['translation/setError'],
        ignoredActionPaths: ['payload.error'],
        ignoredPaths: ['translation.error']
      }
    })
});

// Use with external store
const AppWithExternalStore = () => (
  <ReduxTranslationProvider config={config} store={store}>
    <MyApp />
  </ReduxTranslationProvider>
);

import { useDispatch, useSelector } from 'react-redux';
import { 
  loadTranslationsAsync, 
  reloadTranslationsAsync,
  setLocale,
  setPerformanceMetrics 
} from '@logistically/i18n-react-core';

const ReduxActionsComponent = () => {
  const dispatch = useDispatch();
  const { locale, isLoading, error } = useSelector((state: any) => state.translation);
  
  const handleLocaleChange = async (newLocale: string) => {
    try {
      // Dispatch async action
      await dispatch(loadTranslationsAsync(newLocale));
      
      // Update locale
      dispatch(setLocale(newLocale));
      
      // Update performance metrics
      dispatch(setPerformanceMetrics({ 
        translationTime: 150,
        cacheHitRate: 90 
      }));
    } catch (error) {
      console.error('Failed to change locale:', error);
    }
  };
  
  return (
    <div>
      <select value={locale} onChange={(e) => handleLocaleChange(e.target.value)}>
        <option value="en">English</option>
        <option value="es">Español</option>
        <option value="fr">Français</option>
      </select>
      
      {isLoading && <div>Loading...</div>}
      {error && <div>Error: {error.message}</div>}
      
      <button onClick={() => dispatch(reloadTranslationsAsync())}>
        Reload Translations
      </button>
    </div>
  );
};

// Placeholder for future Zustand implementation
import { ZustandTranslationProvider, useZustandTranslation } from '@logistically/i18n-react-core';

// Will provide lightweight state management with similar API

// Only import what you use
import { useTranslation } from '@logistically/i18n-react-core';

// Or import specific adapters
import { ReduxTranslationProvider } from '@logistically/i18n-react-core/adapters/redux';