import { ThemeType } from '@/utils/useTheme'

export const menuTheme: Record<ThemeType, { [key: string]: string }> = {
  light: {
    '--el-menu-bg-color': '#ffffff',
    '--el-menu-hover-bg-color': '#cccccc',
    '--el-menu-active-bg-color': 'var(--el-color-primary-light-9)',
    '--el-menu-text-color': '#333333',
    '--el-menu-active-color': 'var(--el-color-primary)',
    '--el-menu-hover-text-color': '#333333',
    '--el-menu-horizontal-sub-item-height': '50px'
  },
  inverted: {
    '--el-menu-bg-color': '#304156',
    '--el-menu-hover-bg-color': '#1f2d3d',
    '--el-menu-active-bg-color': '#001528',
    '--el-menu-text-color': '#bfcbd9',
    '--el-menu-active-color': 'var(--el-color-primary)',
    '--el-menu-hover-text-color': '#ffffff',
    '--el-menu-horizontal-sub-item-height': '50px'
  },
  dark: {
    '--el-menu-bg-color': '#141414',
    '--el-menu-hover-bg-color': '#000000',
    '--el-menu-active-bg-color': '#000000',
    '--el-menu-text-color': '#bdbdc0',
    '--el-menu-active-color': 'var(--el-color-primary)',
    '--el-menu-hover-text-color': '#ffffff',
    '--el-menu-horizontal-sub-item-height': '50px'
  }
}
