<template>
  <button
    class="btn-icon area-favorite-btn"
    :class="{ 'is-active': isFavorite, 'text-muted': !isFavorite, 'text-warning': isFavorite }"
    type="button"
    :aria-label="isFavorite ? 'Remove bookmark' : 'Bookmark'"
    @click.stop="favoritesStore.toggle(areaId)"
  >
    <i class="ph" :class="isFavorite ? 'ph-fill ph-bookmark-simple' : 'ph-bookmark-simple'" />
  </button>
</template>

<script setup>
import { computed } from "vue";
import { useFavoritesStore } from "../../../stores/favorites";

const props = defineProps({
  areaId: {
    type: [String, Number],
    required: true,
  },
});

const favoritesStore = useFavoritesStore();
const isFavorite = computed(() => favoritesStore.has(props.areaId));
</script>