import { createTheme, ThemeOptions } from '@mui/material/styles';
import { useTheme as useMuiTheme, Theme } from '@mui/material/styles';
import { amber } from '@mui/material/colors';
export const themeOptions: ThemeOptions = {
  palette: {
    primary: {
      main: '#ffc107', // amber[300]
    },
    secondary: {
      main: '#ffa000', // amber[500]
    },
    divider: amber[200],
    common: {
      white: '#ffa000',
    },
    text: {
      primary: amber[600],
      secondary: amber[600],
    },
    background: {
      default: '#ffffff', // 设置默认背景颜色
      // paper: '#f5f5f5',   // 设置纸张背景颜色
    },
  },
  typography: {
    // fontFamily: 'Roboto, sans-serif',
  },
  components: {
    MuiButtonBase: {
      defaultProps: {
        disableRipple: true,
      },
    },
    MuiTextField: {
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-root': {
            '& fieldset': {
              borderColor: amber[300],
            },
            '&:hover fieldset': {
              borderColor: amber[500],
            },
            '& .MuiInputBase-input': {
              color: amber[600],
            },
          },
          '& .MuiInputLabel-root': {
            color: amber[600],
          },
        },
      },
    },
  },
};

/**
 * https://bareynol.github.io/mui-theme-creator/
 */
export const theme = createTheme(themeOptions);

export const useTheme = () => {
  return useMuiTheme<Theme>();
};