<template>
  <div class="grid gap-y-8">
    <div class="grid grid-cols-4 gap-4">
      <Example label="Primary">
        <AisButton variant="primary" hover fast press>Button</AisButton>
      </Example>

      <Example label="Secondary">
        <AisButton variant="secondary" hover fast press>Button</AisButton>
      </Example>

      <Example label="Default">
        <AisButton variant="default" hover fast press>Button</AisButton>
      </Example>

      <Example label="Plain">
        <AisButton variant="plain" hover fast press>Button</AisButton>
      </Example>
    </div>
    <div class="grid grid-cols-4 gap-4">
      <Example label="Info">
        <AisButton variant="info" hover fast press>Button</AisButton>
      </Example>

      <Example label="Success">
        <AisButton variant="success" hover fast press>Button</AisButton>
      </Example>

      <Example label="Warning">
        <AisButton variant="warning" hover fast press>Button</AisButton>
      </Example>

      <Example label="Danger">
        <AisButton variant="danger" hover fast press>Button</AisButton>
      </Example>
    </div>
  </div>
</template>

<script setup>
  import { ref } from "vue";
  import AisButton from '@/components/button/AisButton.vue';
  import Example from "@/components/docs/ComponentExample.vue";

  let loading = ref(false)
  const toggleLoading = () => loading.value = !loading.value

</script>
