import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import 'vuetify/styles'
import {defineNuxtPlugin} from "nuxt/app";
import { aliases, fa } from 'vuetify/iconsets/fa'
import '@fortawesome/fontawesome-free/css/all.css'

export default defineNuxtPlugin(nuxtApp => {
    const vuetify = createVuetify({
        components,
        directives,
        ssr: true,
        theme: {
            defaultTheme: 'otLightTheme',
            themes: {
                otLightTheme: {
                    dark: false,
                    colors: {
                        'ot-green': '#00ad8e',
                        'ot-light-green': '#a9e0d6',
                        'ot-dark-grey': '#324150',
                        'ot-dark-grey-hover': '#2c3a48',
                        'ot-grey': '#777777',
                        'ot-header-menu': '#ECE7E5',
                        'ot-light-grey': '#f5f5f5',
                        'ot-super-light-grey': '#ecf0f5',
                        'ot-danger': '#f56954',
                        'ot-success': '#00a65a',
                        'ot-warning': '#f39c12',
                        'ot-info': '#3c8dbc',
                        'ot-menu-color': '#b8c7ce',
                        'ot-content-color': '#ecf0f4',
                        'ot-border-menu': '#f4f4f4',
                        'ot-white': '#ffffff',
                        'ot-black': '#000000'
                    }
                }
            }
        },
        icons: {
            defaultSet: 'fa',
            aliases,
            sets: {
                fa,
            }
        },
    })
    nuxtApp.vueApp.use(vuetify)
})