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

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

<script setup>
import { useScheduleCartStore } from "src/stores/scheduleCart";

const cart = useScheduleCartStore();
</script>

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