<template>
  <div class="collection">
    <ui-title>{{ t('home.collection.title') }}</ui-title>
    <div class="container">
      <div class="collection__wrapper">
        <div class="collection__inner">
          <home-collection-inner
              v-for="tag in tags"
              :key="tag.node.uuid"
              :tag="tag.node"
          />
          <client-only>
            <home-collection-inner
                v-if="newProducts.length > 0"
                :tag="newProductsTag"
            />
            <home-collection-inner
                v-if="priceProducts.length > 0"
                :tag="priceProductsTag"
            />
          </client-only>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type {IProduct, IProductTag} from "~/types";

const props = defineProps<{
  tags: { node: IProductTag }[],
  newProducts: { cursor: string; node: IProduct }[],
  priceProducts: { cursor: string; node: IProduct }[]
}>()

const { t } = useI18n();

const newProductsTag = computed(() => {
  return {
    name: t('home.collection.newTag'),
    tagName: t('home.collection.newTag'),
    uuid: 'new-products',
    productSet: {
      edges: props.newProducts
    }
  }
});

const priceProductsTag = computed(() => {
  return {
    name: t('home.collection.cheapTag'),
    tagName: t('home.collection.cheapTag'),
    uuid: 'price-products',
    productSet: {
      edges: props.priceProducts
    }
  }
});
</script>

<style lang="scss" scoped>
.collection {
  &__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
  }

  &__inner {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
    gap: 100px;
  }
}
</style>