<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: () => [
      ['Server Sent Events', 20],
      ['No-Build-Step', 21],
      ['Fat Morph', 18],
      ['Hypermedia', 19],
      ['HTMX', 22],
      ['Idiomorph', 14],
      ['Architecture Description Record', 14],
      ['HATEOAS', 14],
      ['Templating', 17],
      ['Declarative vs. Imperative', 10],
      ['Alien Signals', 14],
      ['Plug-ins', 17],
      ['Brotli Compression', 20],
      ['Comforms to Specification', 19],
      ['Web Components', 14],
      ['Pro Version', 10],
      ['Locality of Behavior', 11],
      ['SDKs', 22],
      ['Web Sockets', 10],
      ['Full Stack', 17],
      ['Attributes And Actions', 22],
      ['Datastar', 36],
    ],
  },
})
</script>

<template>
  <Vue3WordCloud style="width: 100%; height: 100%" :words="words" :color="([, w]) => {
    if (w > 25) return 'DeepPink'
    if (w > 20) return 'DarkOrange'
    if (w > 15) return 'LimeGreen'
    if (w > 10) return 'DodgerBlue'
    if (w > 5) return 'Violet'
    return 'MediumTurquoise'
  }" font-family="Arial" />
</template>