import { createTheme } from "@mui/material";
//import { createTheme } from "./types";

const fontFamily: string = "GilroyRegular";
const fontWeight: string = "600";

const theme = createTheme({
  palette: {
    primary: {
      light: "#26272c",
      main: "#111217",
      dark: "#2f3339"
    },
    secondary: {
      main: "#ffffff"
    },
    info: {
      main: "#eaba5b",
      dark: "#fe9903"
    }
  },

  typography: {
    body1: {
      fontFamily: fontFamily
    },
    subtitle1: {
      fontFamily: fontFamily,
      fontWeight: fontWeight,
      fontSize: 25
    },
    subtitle2: {
      fontFamily: fontFamily,
      fontSize: 25,
      textAlign: "center"
    },
    caption: {
      fontFamily: fontFamily,
      fontWeight: fontWeight,
      fontSize: 21
    },
    h5: {
      fontFamily: fontFamily,
      fontWeight: fontWeight,
      fontSize: 35
    },
    h6: {
      fontFamily: fontFamily,
      fontWeight: fontWeight,
      fontSize: 18,
      textAlign: "center"
    },
    button: {
      fontFamily: fontFamily,
      fontWeight: fontWeight,
      fontSize: 22
    },
    h4: {
      fontFamily: fontFamily,
      fontWeight: fontWeight,
      fontSize: 16
    }
  },
});


declare module '@mui/material/styles' {
  interface Theme {
    palette: {
      primary: {
        light: string;
        main: string;
        dark: string;
      },
      secondary: {
        main: string;
      },
      info: {
        main: string;
        dark: string;
      }
    }
  }
  // allow configuration using `createTheme`
  interface TypographyVariants {
    body1: React.CSSProperties;
    subtitle1: React.CSSProperties;
    subtitle2: React.CSSProperties;
    caption: React.CSSProperties;
    h5: React.CSSProperties;
    h6: React.CSSProperties;
    button: React.CSSProperties;
  }
}


export default theme;