import { createTheme, ThemeProvider as MUIThemeProvider, CssBaseline, ThemeOptions } from "@mui/material";
import { nativeTheme } from "electron";
import darkPalette from "./palette/darkPalette";
import lightPalette from "./palette/lightPalette";
import components from "./components";
import { FC } from "react";

interface ThemeProviderProps {
    children: React.ReactNode;
}

const ThemeProvider: FC<ThemeProviderProps> = ({ children }) => {
    const themeOptions: ThemeOptions = {
        palette: darkPalette,
        typography: {
            fontFamily: '"Poppins", sans-serif',
        },
        spacing: 8,
        shape: {
            // @ts-ignore
            borderRadius: '15px',
        },
    };

    const baseTheme = createTheme(themeOptions);

    const theme = createTheme({
        ...baseTheme,
        components: components(baseTheme),
    })

    return (
        <MUIThemeProvider theme={theme}>
            <CssBaseline />
            {children}
        </MUIThemeProvider>
    );
};

export default ThemeProvider;