<script setup>
import {ref} from 'vue'
import AisSearchInput from "@c/search-input/AisSearchInput.vue";
import AisButton from '@c/button/AisButton.vue'

const searchValue = ref('')
const search = ref(null)
const handleFocus = () => search.value.focus()
</script>

<template>
  <div class="flex gap-4">
    <AisSearchInput
        ref="search"
        v-model="searchValue"
        placeholder="Enter search value..."
        class="grow"
    />

    <AisButton
      @click="search.focus()"
      hover press
    >
      Focus 1
    </AisButton>
    <AisButton
      @click="handleFocus"
      variant="secondary"
      hover press
    >
      Focus 2
    </AisButton>
  </div>
</template>

