<template>
  <button
    class="p-1 rounded hover:bg-slate-100 transition-colors duration-300"
    aria-label="Toggle favorite"
    @click.stop="fav.toggle(props.track)"
  >
    <svg
      v-if="fav.isFavorite(props.track.id)"
      class="h-5 w-5 text-amber-400 hover:text-amber-300"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path
        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
      />
    </svg>
    <svg
      v-else
      class="h-5 w-5 text-slate-400"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path
        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
      />
    </svg>
  </button>
</template>

<script setup lang="ts">
import { useFavoritesStore } from '~/store/favorites'
import type { Track } from '~/../types/types'

const fav = useFavoritesStore()

const props = defineProps<{ track: Track }>()
</script>
