<template>
  <main>
    <!-- hero area start -->
    <hero-area v-if="$settings?.sliderShow"></hero-area>
    <!-- hero area end -->

    <!-- product area start -->
    <product-area
        v-for="item in category_data"
        v-if="!pending"
        :key="item?.id"
        :category="item"
        :pretitle="item?.preName || toolsService.parseCategoryName(item)"
        :products="item?.products || []"
        :title="toolsService.parseCategoryName(item)"
        :url="item?.url || ''"
    ></product-area>
    <!-- product area start -->

    <!-- brand area start -->
    <brand-area />
    <!-- brand area end -->

  </main>
</template>

<script lang="ts" setup>
import toolsService from "@/services/toolsService";
import type {ISiteSettings} from "@/types/site-settings-d-t";
import type {ICategory} from "@/types/category-d-t";
import {api} from "@/plugins/api";

const $settings = useNuxtApp()?.$settings as ISiteSettings;
const {noImageUrl} = $settings;

const {data: category_data, pending} = useLazyAsyncData(
    'categories/featured',
    (): Promise<ICategory[]> => api.categoryFeaturedData({noImageUrl})
);
</script>
