import { createApp } from 'vue';
import '@mdi/font/css/materialdesignicons.css';
import 'vuetify/styles';
import './styles/app.css';
import { allComponents, provideFluentDesignSystem } from '@fluentui/web-components';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
import App from './App.vue';

provideFluentDesignSystem().register(allComponents);

const vuetify = createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: 'mixedAssetsDark',
    themes: {
      mixedAssets: {
        dark: false,
        colors: {
          background: '#f7f8fb',
          surface: '#ffffff',
          primary: '#2457a6',
          secondary: '#006c6a',
          accent: '#8f4f00',
          info: '#3f6f99',
          success: '#2f7d4b',
          warning: '#a56a00',
          error: '#b3261e'
        }
      },
      mixedAssetsDark: {
        dark: true,
        colors: {
          background: '#11161d',
          surface: '#171d25',
          primary: '#8fb8ff',
          secondary: '#54d3c7',
          accent: '#f2b36b',
          info: '#9cc8e8',
          success: '#8fd7a3',
          warning: '#f0c06a',
          error: '#ffb4ab'
        }
      }
    }
  },
  defaults: {
    VBtn: { rounded: 'sm', style: 'text-transform:none; letter-spacing:0' },
    VCard: { rounded: 'sm' },
    VTextField: { variant: 'outlined', density: 'compact' },
    VSelect: { variant: 'outlined', density: 'compact' },
    VTextarea: { variant: 'outlined', density: 'compact' },
    VDataTable: { density: 'comfortable' }
  }
});

createApp(App).use(vuetify).mount('#app');
