<template>
  <div class="space-y-3">
    <div>
      <AisButtonGroup>
        <AisButton hover fast press>Button 1</AisButton>
        <AisButton hover fast press>Button 2</AisButton>
        <AisButton hover fast press>Button 3</AisButton>
      </AisButtonGroup>
    </div>
    <div>
      <AisButtonGroup>
        <AisButton variant="success">Button 1</AisButton>
        <AisButton variant="warning">Button 2</AisButton>
        <AisButton variant="danger">Button 3</AisButton>
      </AisButtonGroup>
    </div>
    <div>
      <AisButtonGroup class="default shadow">
        <AisButton variant="default" alternate hover fast press font="sans" size="lg">Button 1</AisButton>
        <AisButton class="shadow-inner-lg" variant="default" alternate hover fast press font="sans" size="lg">Button 2</AisButton>
        <AisButton variant="default" alternate hover fast press font="sans" size="lg">Button 3</AisButton>
      </AisButtonGroup>
    </div>
    <div>
      <AisButtonGroup class="default shadow">
        <AisButton variant="default" alternate hover fast press font="sans" size="md">Button 1</AisButton>
        <AisButton class="shadow-inner-lg" variant="default" hover fast press font="sans" size="md">Button 2</AisButton>
        <AisButton variant="default" alternate hover fast press font="sans" size="md">Button 3</AisButton>
      </AisButtonGroup>
    </div>
    <div>
      <AisButtonGroup class="">
        <AisButton variant="default" alternate font="sans" size="sm" press>Button 1</AisButton>
        <AisButton variant="default" alternate font="sans" size="sm" press>Button 2</AisButton>
        <AisButton variant="default" alternate font="sans" size="sm" press>Button 3</AisButton>
      </AisButtonGroup>
    </div>
    <div>
      <AisButtonGroup class="">
        <AisButton variant="default" alternate font="sans" size="sm" icon="unknown">Button 1</AisButton>
        <AisButton variant="default" alternate font="sans" size="sm" icon="delete">Button 2</AisButton>
        <AisButton variant="default" alternate font="sans" size="sm" icon="new">Button 3</AisButton>
      </AisButtonGroup>
    </div>
    <div>
      <AisButtonGroup class="rounded">
        <AisButton variant="primary" alternate hover fast font="sans" size="sm">Button 1</AisButton>
        <AisButton class="shadow-inner-lg" variant="primary" alternate hover fast font="sans" size="sm">Button 2</AisButton>
        <AisButton variant="primary" alternate hover fast font="sans" size="sm">Button 3</AisButton>
      </AisButtonGroup>
    </div>
    <div>
      <AisButtonGroup class="rounded-full">
        <AisButton class="shadow-inner-lg" variant="secondary" alternate hover fast font="sans" size="sm">Button 1</AisButton>
        <AisButton variant="secondary" alternate hover fast font="sans" size="sm">Button 2</AisButton>
        <AisButton variant="secondary" alternate hover fast font="sans" size="sm">Button 3</AisButton>
      </AisButtonGroup>
    </div>
  </div>
</template>

<script setup>
  import AisButtonGroup from '@/components/button-group/AisButtonGroup.vue'
  import AisButton from '@/components/button/AisButton.vue'
</script>
