import {createTheme} from '@mui/material/styles'
import {RefineThemes} from '@refinedev/mui'

export const COLORS = {
  primary: '#7f6b58',
  secondary: '#48989f',
}

const theme = {
  palette: {
    primary: {
      main: COLORS.primary,
    },
    secondary: {
      main: COLORS.secondary,
    },
  },
  components: {
    MuiAppBar: {
      styleOverrides: {
        root: {
          backgroundColor: COLORS.secondary,
        },
      },
    },
  },
}

export const CustomTheme = {
  Light: createTheme({
    ...RefineThemes.Blue,
    palette: {
      ...RefineThemes.Blue.palette,
      ...theme.palette,
    },
    components: {
      ...theme.components,
    },
  }),
  Dark: createTheme({
    ...RefineThemes.BlueDark,
    palette: {
      ...RefineThemes.BlueDark.palette,
      ...theme.palette,
    },
    components: {
      ...theme.components,
    },
  }),
}