// import 'devextreme/dist/css/dx.material.blue.light.compact.css'
import '@lottiefiles/lottie-player'
import '@/assets/css/main.css'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import { createApp, provide, h } from 'vue'
import { DefaultApolloClient } from '@vue/apollo-composable'
import { apolloClient } from './utils/graphql'
import { VanillaComponents, defineConfiguration } from '@flavorly/vanilla-components'

const app = createApp({
  setup() {
    provide(DefaultApolloClient, apolloClient())
  },
  render: () => h(App)
})

app.use(
  VanillaComponents,
  defineConfiguration({
    RichSelect: {
      classes: {
        trigger: 'rich-select-trigger',
        searchInput: 'rich-select-search-input',
        selectedHighlightedOption: 'rich-select-selected-highlighted-option'
      }
    }
  })
)

app.use(createPinia())
app.use(router)
app.mount('#app')