import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createI18n } from 'vue-i18n'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// Import design tokens
import './styles/design-tokens.css'

import App from './App.vue'
import router from './router'

// Import translation files
import zh from './locales/zh.json'
import en from './locales/en.json'

// Create i18n instance
const i18n = createI18n({
  legacy: false, // Use Composition API
  locale: localStorage.getItem('locale') || 'zh', // Get from localStorage or default to Chinese
  fallbackLocale: 'zh',
  messages: {
    zh,
    en
  }
})

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(i18n)
app.use(ElementPlus)

// Make i18n available globally
app.config.globalProperties.$t = i18n.global.t

app.mount('#app')