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


export const penaMuiTheme = createTheme({
    breakpoints: {
        values: {
            xs: 300,
            sm: 560,
            md: 900,
            lg: 1200,
            xl: 1536,
        },
    },
    palette: {
        mode: "light",
        primary: {
            main: "#000000",
        },
        secondary: {
            main: "#252734"
        },
        text: {
            primary: "#000000",
            secondary: "#7E2AEA",
        },
        background: {
            default: "#F2F3F7",
        },
        lightPurple: {
            main: "#333647",
        },
        darkPurple: {
            main: "#252734",
        },
        brightPurple: {
            main: "#7E2AEA",
        },
        fadePurple: {
            main: "#C19AF5",
        },
        grey1: {
            main: "#434657",
        },
        grey2: {
            main: "#9A9AAF",
        },
        grey3: {
            main: "#4D4D4D",
        },
        orange: {
            main: "#FB5607",
        },
        navbarbg: {
            main: "#FFFFFF",
        },
    },
    components: {
        MuiButton: {
            variants: [
                {
                    props: { variant: "pena-contained" },
                    style: ({ theme }) => theme.unstable_sx({
                        borderColor: theme.palette.brightPurple.main,
                        backgroundColor: theme.palette.brightPurple.main,
                        width: "180px",
                        paddingTop: "10px",
                        paddingBottom: "10px",
                        borderRadius: "8px",
                        boxShadow: "none",
                        // стили текста кнопки - нужны ли?
                        fontSize: "18px",
                        lineHeight: "24px",
                        fontWeight: 400,
                        textTransform: "none",
                        //
                    })
                }
            ]
        },
        MuiTypography: {
            defaultProps: {
                variantMapping: {
                    p1: "p",
                }
            },
        },
    }
});

declare module '@mui/material/Button' {
    interface ButtonPropsVariantOverrides {
        "pena-contained": true;
    }
}


declare module "@mui/material/styles" {
    interface Palette {
        lightPurple: Palette["primary"],
        darkPurple: Palette["primary"],
        brightPurple: Palette["primary"],
        fadePurple: Palette["primary"],
        grey1: Palette["primary"],
        grey2: Palette["primary"],
        grey3: Palette["primary"],
        orange: Palette["primary"],
        navbarbg: Palette["primary"],
    }
    interface PaletteOptions {
        lightPurple?: PaletteOptions["primary"],
        darkPurple?: PaletteOptions["primary"],
        brightPurple?: PaletteOptions["primary"],
        fadePurple?: PaletteOptions["primary"],
        grey1?: PaletteOptions["primary"],
        grey2?: PaletteOptions["primary"],
        grey3?: PaletteOptions["primary"],
        orange?: PaletteOptions["primary"],
        navbarbg?: PaletteOptions["primary"],
    }
    interface TypographyVariants {
        infographic: React.CSSProperties;
        p1: React.CSSProperties;
        price: React.CSSProperties;
        oldPrice: React.CSSProperties;
    }
    interface TypographyVariantsOptions {
        infographic?: React.CSSProperties;
        p1?: React.CSSProperties;
        price?: React.CSSProperties;
        oldPrice?: React.CSSProperties;
    }
}

declare module "@mui/material/Typography" {
    interface TypographyPropsVariantOverrides {
        infographic: true;
        p1: true;
        price: true;
        oldPrice: true;
    }
}