<!--
Url: https://adamwathan.me/renderless-components-in-vuejs/

Jeho pristup je predavani atributu a eventu jako cely objekt, moje je  :bookmarkNow a prijde mi to lepsi teda ... ale ukladam.

-->

<script setup>
const props = defineProps({
  links: {
    type: Array,
    required: true
  }
})

const bookmark = (link) => {
  link.bookmarked = !link.bookmarked;
}
</script>

<template>
  <slot 
    v-for="(link, index) in links" 
    :key="link.id"
    :link="link"
    :bookmarkNow="() => bookmark(link)"
    :bookmarkButtonAttrs="{
      style: link.bookmarked ? 'font-weight: bold;' : ''
    }"
    :bookmarkButtonEvents="{
      click: () => bookmark(link)
    }"
  />
</template>