import { createApp, ref } from "vue";
import "vmk-ui-kit/dist/css/kit.css";
import "vmk-ui-kit/dist/assets/fonts/phosphor-icons/src/css/icons.css";
import { VMKUiVue } from "vmk-ui-kit/vue";

const App = {
  setup() {
    const count = ref(0);
    const loading = ref(false);
    return { count, loading };
  },
  template: `
    <main class="container py-4">
      <h1>VMK UI Kit Vue Example</h1>
      <div class="demo-row">
        <GnButton variant="primary" icon="essentials/plus" @click="count++">Count: {{ count }}</GnButton>
        <GnButton variant="secondary" icon="ph-arrow-right">Phosphor name</GnButton>
        <GnButton variant="tertiary" :loading="loading" @click="loading = !loading">Toggle loading</GnButton>
        <GnButton variant="danger" disabled>Disabled</GnButton>
      </div>
    </main>
  `
};

createApp(App).use(VMKUiVue).mount("#app");