interface StyleObject {
  aside: string
  asideScrollbars: string
  asideBrand: string
  asideMenuItem: string
  asideMenuItemActive: string
  asideMenuDropdown: string
  navBarItemLabel: string
  navBarItemLabelHover: string
  navBarItemLabelActiveColor: string
  overlay: string
  activeLinkColor: string;
  bgLayoutColor: string;
  iconsColor: string;
  cardsColor: string;
  focusRingColor: string;
  corners: string;
  cardsStyle: string;
  linkColor: string;
  websiteHeder: string;
  borders: string;
  shadow: string;
  websiteSectionStyle: string;
  textSecondary: string;
}

export const white: StyleObject = {
  aside: 'bg-white dark:text-white',
  asideScrollbars: 'aside-scrollbars-light',
  asideBrand: '',
  asideMenuItem: 'text-slate-600 hover:bg-emerald-50/50 hover:text-emerald-600 dark:text-dark-500 dark:hover:text-white dark:hover:bg-dark-800 transition-colors',
  asideMenuItemActive: 'font-bold text-emerald-600 bg-emerald-50/70 dark:text-white',
  asideMenuDropdown: 'bg-emerald-50/30',
  navBarItemLabel: 'text-emerald-600',
  navBarItemLabelHover: 'hover:text-emerald-700',
  navBarItemLabelActiveColor: 'text-emerald-700',
  overlay: 'from-white via-emerald-50 to-white',
  activeLinkColor: 'bg-emerald-50/70',
  bgLayoutColor: 'bg-slate-50',
  iconsColor: 'text-emerald-500',
  cardsColor: 'bg-white',
  focusRingColor: 'focus:ring focus:ring-emerald-600 focus:border-emerald-600 focus:outline-none border-slate-300 dark:focus:ring-emerald-600 dark:focus:border-emerald-600',
  corners: 'rounded-3xl',
  cardsStyle: 'bg-white border border-slate-200 shadow-sm',
  linkColor: 'text-emerald-600',
  websiteHeder: 'border-b border-slate-200',
  borders: 'border-slate-200',
  shadow: 'shadow-xl shadow-emerald-500/5', 
  websiteSectionStyle: '',
  textSecondary: 'text-slate-500',
}
   




export const dataGridStyles = {
  '& .MuiDataGrid-cell': {
    paddingX: 3,
    border: 'none',
  },
  '& .MuiDataGrid-columnHeader': {
    paddingX: 3,
  },
  '& .MuiDataGrid-columnHeaderCheckbox': {
    paddingX: 0,
  },
  '& .MuiDataGrid-columnHeaders': {
    paddingY: 4,
    borderStartStartRadius: 24,
    borderStartEndRadius: 24,
    backgroundColor: '#f8fafc',
  },
  '& .MuiDataGrid-footerContainer': {
    paddingY: 0.5,
    borderEndStartRadius: 24,
    borderEndEndRadius: 24,
  },
  '& .MuiDataGrid-root': {
    border: 'none',
    borderRadius: '24px',
    backgroundColor: '#ffffff',
    boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
  },
};

export const basic: StyleObject = {
    aside: 'bg-slate-900',
    asideScrollbars: 'aside-scrollbars-gray',
    asideBrand: 'bg-slate-950 text-white',
    asideMenuItem: 'text-slate-300 hover:text-white hover:bg-white/5 transition-colors',
    asideMenuItemActive: 'font-bold text-white bg-emerald-600',
    asideMenuDropdown: 'bg-slate-800/50',
    navBarItemLabel: 'text-slate-900',
    navBarItemLabelHover: 'hover:text-emerald-500',
    navBarItemLabelActiveColor: 'text-emerald-600',
    overlay: 'from-slate-700 via-slate-900 to-slate-700',
    activeLinkColor: 'bg-emerald-500/10',
    bgLayoutColor: 'bg-slate-50',
    iconsColor: 'text-emerald-500',
    cardsColor: 'bg-white',
    focusRingColor: 'focus:ring focus:ring-emerald-600 focus:border-emerald-600 focus:outline-none dark:focus:ring-emerald-600 border-slate-300 dark:focus:border-emerald-600',
    corners: 'rounded-3xl',
    cardsStyle: 'bg-white border border-slate-200 shadow-sm',
    linkColor: 'text-slate-900',
    websiteHeder: '',
    borders: '',
    shadow: 'shadow-lg shadow-emerald-500/10',
    websiteSectionStyle: '',
    textSecondary: 'text-slate-500',
}