import Vue from 'vue';
import 'material-design-icons-iconfont/dist/material-design-icons.css';
import Vuetify from 'vuetify/lib/framework';
import { library } from '@fortawesome/fontawesome-svg-core'
import { faShareAltSquare } from '@fortawesome/free-solid-svg-icons'
import { faFacebookSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faFacebookSquare, faTwitterSquare, faShareAltSquare)
Vue.component('font-awesome-icon', FontAwesomeIcon);

Vue.use(Vuetify);

const FONTAWESOME_ICONS = {
  facebook: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fab", "facebook-square"]
    }
  },
  twitter: {
    component: FontAwesomeIcon,
    props: {
      icon: ["fab", "twitter-square"]
    }
  },
  share: {
    component: FontAwesomeIcon,
    props: {
      icon: "share-alt-square"
    }
  }
}

export default new Vuetify({
  breakpoint: {
    thresholds: {
      xs: 470,
      sm: 700,
      md: 1250,
      lg: 1900,
    },
    scrollBarWidth: 24,
  },
  theme: {
    options: {
      customProperties: true
    },
    themes: {
      light: {
        primary: '#560027',
        secondary: '#BC477B',
        tertiary: '#FDF4F5',
        anchor: '#560027',
        error: '#FDF4F5',
        border: '#9E9E9E',
        text: '#2c3e50'
      }
    }
   },
  defaultAssets: {
    font: true,
    icons: 'md'
  },
  icons: {
    iconfont: 'md',
    values: FONTAWESOME_ICONS,
}
});