<template>
  <div class="search-wrapper w-full">
    <label class="input w-full">
      <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <g
            stroke-linejoin="round"
            stroke-linecap="round"
            stroke-width="2.5"
            fill="none"
            stroke="currentColor"
        >
          <circle cx="11" cy="11" r="8"></circle>
          <path d="m21 21-4.3-4.3"></path>
        </g>
      </svg>
      <input
          readonly
          class="grow input-lg w-full"
          placeholder="Поиск по магазину"
          @click="showSearchPage"
      />
    </label>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {useSearchStore} from "@/stores/SearchStore.js";
import {useHapticFeedback} from "@/composables/useHapticFeedback.js";

const router = useRouter();
const haptic = useHapticFeedback();

function showSearchPage() {
  router.push({name: 'search'});
  useSearchStore().reset();
  haptic.impactOccurred('medium');
}
</script>


