// 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:
          'bg-gray-200 border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 relative flex items-center justify-between w-full focus:z-10 cursor-pointer text-sm transition duration-100 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed px-4 py-3',
        searchInput:
          'inline-block focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 w-full  text-sm px-4 py-2.5 text-gray-700 placeholder-gray-500/60 border-0 rounded-lg bg-gray-200',
        selectedHighlightedOption: 'font-semibold bg-teal-600 focus:outline-none text-white'
      }
    }
  })
)

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