import { Capacitor } from '@capacitor/core'
import { createApp } from 'vue'
import '@/style.scss'
import '@fortawesome/fontawesome-free/css/all.min.css'
import App from './App.vue'
import { usePreferredDark, useFavicon } from '@vueuse/core'
import { initializeFirebase } from '@/composables/useFirebase'
import { StatusBar, Style } from '@capacitor/status-bar'
import { Keyboard } from '@capacitor/keyboard'

if (Capacitor.isNativePlatform()) {
  StatusBar.setStyle({ style: Style.Dark })
  Keyboard.setAccessoryBarVisible({ isVisible: true })
}
initializeFirebase()

const isDark = usePreferredDark()
const favicon = computed<string>(() =>
  isDark.value ? '/contexted-white.ico' : '/contexted-black.ico'
)
useFavicon(favicon)

createApp(App).mount('#app')