<template>
  <button id="dtl-btn" class="bg-black rounded-md p-4" :title="'Design to Light: ' + (hasAlternatives ? 'New' : grade)" data-icon="leaf" :data-grade="grade" :data-new="hasAlternatives ? true : undefined">
    <span lang="en" class="sr-only">Design to Light</span>
    <span v-if="hasAlternatives" lang="en" class="new">New</span>
  </button>
</template>
<script setup>
import { storeToRefs } from "pinia";
import { usePageStore } from "../../stores/page";
import { computed } from "vue";

const { page } = storeToRefs(usePageStore());

const hasAlternatives = computed(() => {
  return page.value.designToLight.length > 1;
});

const grade = computed(() => {
  if (hasAlternatives.value) return "new";
  return page.value.designToLight[0].grades.global.letter;
});
</script>
