import { createTheme, responsiveFontSizes, ThemeOptions } from "@mui/material";

export const options = (themeType: "light" | "dark"): ThemeOptions => ({
  palette: {
    mode: themeType,
    ...(themeType === "light"
      ? {
          background: {
            default: "#f5f5f5",
            paper: "#fff"
          },
        }
      : {
          background: {
            default: "#0c101b",
            paper: "#1c1f26"
          },
        }),
    primary: {
      main: "#00AEEF"
    },
    secondary: {
      main: "#F39200"
    },
    error: {
      main: "#e53935"
    },
    warning: {
      main: "#fdd835"
    },
    info: {
      main: "#29b6f6"
    },
    success: {
      main: "#43a047"
    },
    divider: "rgba(0, 0, 0, 0.12)"
  },
  typography: {
    fontFamily: `"Roboto", "Helvetica", "Arial", sans-serif`,
    fontSize: 14,
    h1: {
      fontSize: "2.5rem"
    },
    h2: {
      fontSize: "2rem"
    },
    h3: {
      fontSize: "1.75rem"
    },
    h4: {
      fontSize: "1.5rem"
    },
    h5: {
      fontSize: "1.25rem"
    },
    h6: {
      fontSize: "1rem"
    },
    button: {
      textTransform: "none"
    }
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: {
          margin: 0,
          padding: 0,
        }
      }
    }
  },
  cssVarPrefix: "mui", // optional prefix for CSS vars
  cssVariables: true
});

// Create both themes once for reuse
export const lightTheme = responsiveFontSizes(createTheme(options("light")));
export const darkTheme = responsiveFontSizes(createTheme(options("dark")));
