<template>
  <UBadge
    :color="computeColor(rating)"
    :label="`${rating}/100`"
    variant="subtle"
  />
</template>

<script>
import { computed } from "#imports";
import { useSeoStats } from "../composables/useSeoStats";
</script>

<script setup>
const props = defineProps({
  seo: { type: [Object, null], required: true },
  as: { type: null, required: false }
});
const seo = computed(() => props.seo ?? { title: "", description: "" });
const { title, description, computeColor } = useSeoStats(seo);
const rating = computed(() => {
  return Math.round((title.value.progress + description.value.progress) / 2);
});
</script>
