<script setup lang="ts">
const props = defineProps<{
  contact: Pick<ContactRecord, "favorite">
}>();

const favorite = computed(() => props.contact.favorite);
const ariaLabel = computed(() => favorite.value ? "Remove from favorites" : "Add to favorites");
</script>

<template>
  <form method="post">
    <button
      :aria-label=ariaLabel
      name="favorite"
      :value="() => favorite ? 'false': 'true'"
    >
      {{ favorite ? "★" : "☆" }}
    </button>
  </form>
</template>

<style scoped>

</style>