<script setup>
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { ref, watch, defineEmits } from "vue";
import { reg_1, department_id, getCustomerName, searchAndSelectCustomer, customer_id, clearCache, clearCustomerSelection } from "@/components/shop/POSDepartmentProcess.vue"

const props = defineProps({
  showSuggestions: {
    type: Boolean,
    default: false,
  },
});

const suggestions = ref([]);

const onChange = () => {
  if (props.showSuggestions) {
    // Show suggestions
    console.log("Showing suggestions");
  }
}

const onClick = (suggestion) => {
  // Handle click on suggestion
  console.log("Clicked suggestion:", suggestion);
}
</script>

<template>
  <div>
    <div class="tags">
      <span
        v-for="(suggestion, index) in suggestions"
        :key="index"
        class="tag is-link is-light"
        @click="onClick(suggestion)"
      >
        {{ suggestion }}
      </span>
    </div>
  </div>
</template>

<style scoped>

</style>