<script lang="ts">


export default {
  async setup() {
    const res = await fetch(`http://localhost:7000/api/discover`)

    return {
      data: await res.json()
    }
  },
  methods: {
    abbreviate(text: number) {
        return Intl.NumberFormat('en-US', {
            //@ts-ignore
            notation: "compact",
            maximumFractionDigits: 1
        }).format(text)
    }
  }
}
</script>

<template>
  <div class="max-w-5xl mx-auto">
    <div class="p-2">
      <h1 class="font-bold text-5xl text-white"> Discover </h1>
      <p class="text-xl text-white"> Sort through popular categories</p>

      <div class="pt-5 inline-flex text-white">
        <p class="mr-2 font-bold text-white">Filter by tag</p>
        <form class="relative">
          <label for="searchBar" class="hidden">Search</label>
          <v-icon
            name="io-search-outline"
            class="absolute my-auto inset-y-0 left-2"
          ></v-icon>
          <input
            type="text"
            id="searchBar"
            name="searchBar"
            placeholder="Search"
            class="rounded-md p-1 pl-8 text-black bg-neutral-500 placeholder:text-white"
          />
        </form>
      </div>
    </div>

    <ul class="">
      <li v-for="category in data" :key="category" class="inline-flex m-2 hover:scale-105 transition-transform">
        <div class="bg-ctp-crust max-w-[13.5rem] rounded-lg">
          <a :href="`http://localhost:5173/game/${category.name}`">
            <img :src="category.image" class="rounded-lg rounded-b-none">
          </a>

          <div class="p-2">
            <div>
              <p class="font-bold text-white text-xl"> {{ category.displayName }}</p>
              <p class="text-sm  text-white"> {{ abbreviate(category.viewers) }} viewers</p>
            </div>

            <ul class="h-8 overflow-hidden">
              <li v-for="tag in category.tags" :key="tag" class="inline-flex">
                <span class="p-2.5 py-1.5 bg-ctp-surface0 rounded-md m-0.5 text-xs font-bold text-white">{{ tag }}</span>
              </li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
