<script setup lang="ts">
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
import * as log from "loglevel";
import { computed } from "vue";
import type { MediaLibraryCategoryPage } from "@/types";

const props = defineProps<{
  categorySlug: string;
}>();

log.debug("MediaLibraryCategoryPage created", props);

const mediaStore = useMediaLibraryStore();

const category = computed(() => {
  return mediaStore.mediaLibraryPage?.children.find((c) =>
    c.frontend_url.endsWith(props.categorySlug)
  ) as MediaLibraryCategoryPage | undefined;
});
</script>

<template>
  <div v-if="mediaStore.mediaLibraryPage && category" class="container-large">
    <div class="mb-10 mt-6 flex flex-col items-center justify-between lg:flex-row">
      <h1>{{ category.title }}</h1>
    </div>
    <div>
      <ul class="grid grid-cols-1 gap-5 md:grid-cols-4">
        <li v-for="cat in category.children" :key="cat.id" class="bg-white p-4">
          <router-link :to="cat.frontend_url" :data-cy="`${cat.title}-link`">
            <img class="m-auto" :src="cat.icon_overview_url" alt="" />
            <h3 class="text-center text-base">{{ cat.title }}</h3>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped></style>
