import React from 'react';
import { Helmet } from 'react-helmet';
import { Global } from '@emotion/react'
import { BrowserRouter } from 'react-router-dom';
import ruLocale from 'dayjs/locale/ru';
import dayjs from 'dayjs';
import { useTranslation } from 'react-i18next';
import { ChakraProvider, ColorModeScript, extendTheme } from '@chakra-ui/react'

import { Dashboard } from './dashboard';
import { globalStyles } from './global.styles';

dayjs.locale('ru', ruLocale);

// Расширяем тему Chakra UI
const theme = extendTheme({
  config: {
    initialColorMode: 'light',
    useSystemColorMode: false,
  },
})

interface AppProps {
  store: any; // Тип для store зависит от конкретной реализации хранилища
}

const App: React.FC<AppProps> = ({ store }) => {
  const { t } = useTranslation();
  return (
    <ChakraProvider theme={theme}>
        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
        <BrowserRouter>
            <Helmet>
                <meta name="viewport" content="width=device-width, user-scalable=no" />
                <title>{t('journal.pl.title')}</title>
            </Helmet>
            <Global styles={globalStyles} />
            <Dashboard store={store} />
        </BrowserRouter>
    </ChakraProvider>
)
}

export default App;