<template>
  <section>
    <header>
      <div v-if="block.title" class="font-bold uppercase text-center">{{ block.title }}</div>
      <div v-if="block.description" class="text-sm text-center">{{ block.description }}</div>
    </header>
    <main>
      <div class="flex items-center justify-center p-5 gap-2 flex-wrap">
        <RouterLink class="btn btn-md" to="/categories">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
               class="size-5">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"/>
          </svg>
          Каталог
        </RouterLink>

        <RouterLink
            v-for="category in block.data?.categories || []"
            class="btn btn-md max-w-[12rem]"
            :to="{name: 'product.categories.show', params: {category_id: category.id}}"
            @click="onCategoryClick"
        >
          <span class="overflow-hidden text-ellipsis whitespace-nowrap">{{ category.name }}</span>
        </RouterLink>
      </div>
    </main>
  </section>
</template>

<script setup>
import {ref} from "vue";
import {useHapticFeedback} from "@/composables/useHapticFeedback.js";

const isLoading = ref(false);
const haptic = useHapticFeedback();

const props = defineProps({
  block: {
    type: Object,
    required: true,
  }
});

function onCategoryClick() {
  haptic.impactOccurred('soft');
}
</script>
