<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
<template>
  <q-btn
    class="service-package-button"
    color="primary"
    icon="mdi-shopping-outline"
    round
    unelevated
    :to="{ name: 'ScheduleCartPage' }"
  >
    <q-badge
      v-if="servicePackage.items.length"
      color="secondary"
      floating
      rounded
    >
      {{ servicePackage.items.length }}
    </q-badge>

    <q-tooltip>
      {{ $t("service_package.title") }}
    </q-tooltip>
  </q-btn>
</template>

<script setup>
import { useServicePackageStore } from "src/stores/servicePackage";

const servicePackage = useServicePackageStore();
</script>

<style scoped lang="scss">
.service-package-button {
  box-shadow: 0 8px 24px rgba(166, 61, 247, 0.28);
}
</style>
