import type { SolarIconVariant } from './composables/useSolarIcon'

const solarIconVariant: SolarIconVariant = 'line-duotone'

export default defineAppConfig({
  saas: {
    name: 'Harmonic SaaS',
    ui: {
      // Solar icon variant (linear, bold, outline, broken, bold-duotone, line-duotone)
      solarIconVariant,
      auth: {
        card: {
          root: 'max-w-md mx-auto text-center shadow-2xl mt-10 transition-all duration-3000 transform',
          body: 'p-6 sm:p-10',
          header: 'text-2xl font-bold bg-primary-500 text-white dark:bg-primary-700'
        }
      }
    }
  },
  ui: {
    icons: {
      light: `i-solar-sun-2-${solarIconVariant}`,
      dark: `i-solar-moon-${solarIconVariant}`
    },
    colors: {
      primary: 'glacier',
      secondary: 'downy',
      neutral: 'zinc',
      red: 'google'
    },
    button: {
      slots: {
        base: 'cursor-pointer'
      }
    },
    dropdownMenu: {
      slots: {
        itemWrapper: 'cursor-pointer'
      }
    },
    card: {
      slots: {
        root: 'rounded-xl shadow-md'
      }
    },
    header: {
      slots: {
        root: 'shadow-md',
        title: 'text-lg sm:text-xl'
      }
    },
    input: {
      slots: {
        base: 'bg-secondary-100 dark:bg-secondary-800'
      }
    },
    pageBody: {
      base: 'mt-0 space-y-8 pb-8'
    },
    dashboardSidebar: {
      slots: {
        root: 'shadow-lg bg-default z-20',
        body: 'py-1.5'
      }
    },
    dashboardSidebarCollapse: {
      base: 'absolute -right-3 z-10'
    },
    dashboardNavbar: {
      slots: {
        root: 'bg-default'
      }
    },
    dashboardToolbar: {
      slots: {
        root: 'min-h-[44px] bg-default/70 border-none shadow-sm z-10'
      }
    },
    dashboardPanel: {
      slots: {
        body: ''
      }
    }
  }
})
