import { createTheme, Theme } from "@mui/material";
import { CustomTheme } from ".";

const defaultBackgroundColor: string = '#FAFAFA';
const paperBackground: string = '#FFFFFF';

const primaryMain: string = '#F5F500'
const primaryDark: string = '#1E2A39';
const primaryLight: string = '#FFFFFF';
const pureBlack: string = '#000000';
const slate: string = '#FAFAFA';
const black2: string = '#282828'

const manrope: string = 'Manrope'

export const yellowTheme: CustomTheme = createTheme({
    palette: {
        mode: 'light',
        background: {
            default: defaultBackgroundColor,
            paper: paperBackground,
        },
        primary: {
            main: primaryMain
        },
        secondary: {
            main: primaryDark
        }
    },
    components: {
        MuiButton: {
            variants: [
                {
                    props: { variant: 'contained' },
                    style: {
                        backgroundColor: primaryMain,
                        color: primaryDark,
                        border: 'none',
                        fontWeight: '700',
                        borderRadius: '10px',
                        fontSize: '18px',
                        padding: '16px 28px',
                        fontFamily: manrope,
                        '&:hover': {
                            backgroundColor: pureBlack,
                            color: primaryLight
                        }
                    }
                },
                {
                    props: { variant: 'sit' },
                    style: {
                        backgroundColor: slate,
                        color: black2,
                        borderRadius: '8px 8px 0px 0px'
                    }
                }
            ]
        },
        MuiLink: {
            variants: [
                {
                    props: { variant: 'h6' },
                    style: {
                        fontSize: '24px',
                        fontFamily: manrope,
                        fontWeight: '400',
                        color: primaryLight,
                    }
                },
                {
                    props: { variant: 'subtitle2' },
                    style: {
                        fontFamily: manrope,
                        fontSize: '16px',
                        fontWeight: '400',
                        lineHeight: '26px',
                        letterSpacing: '0em',
                        textAlign: 'left',
                        color: primaryLight,
                    }
                }
            ]
        },
        MuiTextField: {
            variants: [
                {
                    props: { variant: 'standard' },
                    style: {
                        '& .MuiInputBase-input': {
                            padding: '12px 0',
                            fontSize: '16px',
                            fontFamily: manrope,
                        },
                        '.css-v4u5dn-MuiInputBase-root-MuiInput-root:after': {
                            borderBottom: `2px solid ${primaryMain}`,
                        }
                    }
                }
            ]
        }
    },
    typography: {
        h5: {
            fontSize: '40px',
            fontWeight: '700',
            color: primaryDark,
            fontFamily: manrope
        },
        h6: {
            fontSize: '24px',
            fontFamily: manrope,
            fontWeight: '400',
            color: primaryLight,
        },
        fontFamily: "'Manrope', sans-serif"
    },
}) as CustomTheme;