<template>
  <div class="search-box" @click="onSearch">
    <van-icon name="search" />
    <div class="txt">Procurem jogos</div>
    <div class="cancel">Cancelar</div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { useGameStore } from "@/stores/modules/game";

const gameStore = useGameStore();
const router = useRouter();

function onSearch() {
  const p = { type: 1, value: "" };
  gameStore.setSearchData(p);
  router.push("/search");
}
</script>
<style lang="scss" scoped>
.search-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.5rem;
  padding: 0.2rem 0.15rem;
  margin-bottom: 0.1rem;
  border-radius: 1rem;
  border: 1px solid #2b3f3d;
  background: #06061a;
  .txt {
    flex: 1;
    text-align: center;
    font-size: 0.35rem;
  }
  .cancel {
    font-size: 0.3rem;
  }
}
</style>
