import { CssBaseline, ThemeProvider, useMediaQuery } from '@mui/material';
import { FC, useMemo } from 'react';
import { Helmet } from 'react-helmet';
import { useTranslation } from 'react-i18next';
import Router from './router';
import useGuestBookStore from './store/store';
import darkTheme from './theme/dark/dark';
import lightTheme from './theme/light/light';

const App: FC = () => {
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
  const theme = useGuestBookStore((state) => state.theme);
  const { t } = useTranslation();

  const themePreset = useMemo(() => {
    if (theme === 'dark' || prefersDarkMode) return darkTheme;

    return lightTheme;
  }, [theme, prefersDarkMode]);

  return (
    <ThemeProvider theme={themePreset}>
      <Helmet>
        <title>{t('GuestBook')}</title>
      </Helmet>
      <CssBaseline />
      <Router />
    </ThemeProvider>
  );
};

export default App;
