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);
    const checked = ref(true);
    const radio = ref("a");
    return { count, loading, checked, radio };
  },
  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>
      <div class="demo-row">
        <GnInput v-model="count" label="Counter" />
        <GnInput state="error" help="This value is invalid" label="Validation" />
      </div>
      <div class="demo-row">
        <GnBadge variant="success" icon="check">Verified</GnBadge>
        <GnBadge variant="warning" outline>Draft</GnBadge>
      </div>
      <div class="demo-row">
        <GnAlert variant="info" title="Info">Vue adapter alert component.</GnAlert>
      </div>
      <div class="demo-row">
        <GnCheckbox v-model="checked">Agree to terms</GnCheckbox>
        <GnSwitch v-model="loading">Loading mode</GnSwitch>
      </div>
      <div class="demo-row">
        <GnRadioGroup v-model="radio" name="demo-radio" label="Pick one" :options="[
          { value: 'a', label: 'Option A' },
          { value: 'b', label: 'Option B' }
        ]" />
      </div>
    </main>
  `
};

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