import { type Theme } from '@material-hu/mui';

import GlobalStyles from '@material-hu/components/composed-components/GlobalStyles';

import useHuGoTheme from 'src/hooks/useHuGoTheme';

const additionalStyles = (theme: Theme) => ({
  html: { colorScheme: theme.palette.mode },
  body: {
    '& .flash-animation': { animation: 'flash 2s linear infinite' },
    '@keyframes flash': { '50%': { filter: 'brightness(.8) saturate(1.1)' } },
  },
});

const ThemedGlobalStyles = () => {
  const HuGoThemeProvider = useHuGoTheme();
  return (
    <HuGoThemeProvider>
      <GlobalStyles additionalStyles={additionalStyles} />
    </HuGoThemeProvider>
  );
};

export default ThemedGlobalStyles;