<script setup>
import Vue3WordCloud from 'vue3-word-cloud'

// Example word list — you can make this a prop if you like
const props = defineProps({
  words: {
    type: Array,
    default: () => [
      ['SSE', 20],
      ['No-Build-Step', 21],
      ['Fat Morph', 20],
      ['Hypermedia', 19],
      ['HTMX', 13],
      ['Idiomorph', 12],
      ['Architecture Description Record', 14],
      ['HATEOAS', 18],
      ['Templating', 12],
      ['Declarative vs. Imperative', 10],
      ['Alien Signals', 12],
      ['Plug-ins', 17],
      ['Brotli Compression', 20],
      ['Comforms to Specification', 21],
      ['Web Components', 14],
      ['Pro Version', 10],
      ['Locality of Behavior', 11],
      ['SDKs', 22],
      ['Web Sockets', 10],
      ['Attributes And Actions', 22],
      ['Datastar', 30],
    ],
  },
})
</script>

<template>
  <Vue3WordCloud
    style="width: 100%; height: 100%"
    :words="words"
    :color="([, w]) => (w > 20 ? 'DeepPink' : w > 10 ? 'RoyalBlue' : 'Gray')"
    font-family="Arial"
  />
</template>