import React, { useMemo } from 'react';
import { createTheme, ThemeProvider } from '@mui/material';
import { darkPalette, lightPalette } from '@/theme/palette';
import { useTranslation } from 'react-i18next';
import { typography } from '@/theme/typography';

export const CustomThemeProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const { i18n } = useTranslation();

  const theme = useMemo(() => {
    const direction = i18n.dir(i18n.language);

    return createTheme({
      direction: direction,
      colorSchemes: {
        light: {
          palette: lightPalette,
        },
        dark: {
          palette: darkPalette,
        },
      },
      cssVariables: {
        colorSchemeSelector: 'class',
      },
      spacing: 8,
      typography: typography,
      components: {
        MuiButton: {
          defaultProps: {
            sx: {
              textTransform: 'none',
            },
          },
        },
      },
    });
  }, [i18n]);

  return (
    <ThemeProvider theme={theme} defaultMode="system">
      {children}
    </ThemeProvider>
  );
};