<template>
  <div class="">
    <div class="flex flex-wrap justify-center gap-y-12 gap-x-10 items-center justify-center">
      <!-- desktop version -->
      <div
        v-for="(item, index) in catproducts.data.slice(0, 5)"
        class="lg:block md:block hidden card-product bg-white rounded-[35px] shadow-lg lg:w-96 md:w-80 h-full py-4 px-5 transition-transform duration-300 hover:scale-[1.1]"
        style="box-shadow: 0px 8px 31px #00000029"
      >
        <a :href="`/products#${item.id}`" class="grid md:grid-cols-2 grid-cols-1 justify-center items-center">
          <div class="txt-product py-2">
            <div class="font-bold text-[#273A97] lg:text-xl md:text-lg text-base">
              {{ item.name }}
            </div>
            <p class="mt-4 line-clamp-3" v-html="item.description"></p>
          </div>
          <div class="img-product h-48 py-4 flex flex-col justify-center justify-center bg-center text-right">
            <img :src="item.thumbnail" class="mx-auto w-36" />
          </div>
        </a>
      </div>
      <!--  -->
      <!-- mobile version -->
      <div
        v-for="(item, index) in catproducts.data.slice(0, 3)"
        class="lg:hidden md:hidden block card-product bg-white rounded-[35px] shadow-lg lg:w-96 md:w-80 h-full py-4 px-5 mx-5 transition-transform duration-300 hover:scale-[1.1]"
        style="box-shadow: 0px 8px 31px #00000029"
      >
        <a :href="`/products#${item.id}`" class="grid md:grid-cols-2 grid-cols-1 justify-center items-center">
          <div class="txt-product py-2">
            <div class="font-bold text-[#273A97] lg:text-xl md:text-lg text-lg text-center">
              {{ item.name }}
            </div>
            <p class="mt-4 line-clamp-2 text-center" v-html="item.description"></p>
          </div>
          <div class="img-product h-auto py-4 flex flex-col justify-center justify-center bg-center text-right">
            <img :src="item.thumbnail" class="mx-auto w-36" />
          </div>
        </a>
      </div>
      <!--  -->
      <div v-if="catproducts.data.length > 3" class="bg-white rounded-[35px] shadow-lg lg:w-96 md:w-80 w-full mx-5 lg:mx-0 md:mx-0 h-full p-5 hover:scale-[1.1] transition" style="box-shadow: 0px 8px 31px #00000029">
        <div class="">
          <img :src="'/images/product-mix.png'" class="w-60 mx-auto" />
        </div>
        <div class="mt-8 w-full">
          <div class="button-highlight-home relative bg-[#EC2029] text-white rounded-full w-40 mx-auto" @mouseover="hovered = true" @mouseleave="hovered = false">
            <NuxtLink to="/products">
              <div class="text-highlight-home font-bold lg:px-12 lg:py-2 px-6 py-2 lg:text-base md:text-sm text-sm">View All</div>
            </NuxtLink>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="flex flex-wrap justify-center items-center gap-10 mt-10">
      <div
        class="card-product bg-white rounded-[35px] shadow-lg w-96 h-full py-4 px-5 transition-transform duration-300 hover:scale-[1.1]"
        style="box-shadow: 0px 8px 31px #00000029"
      >
        <div class="grid grid-cols-2 justify-center items-center">
          <div class="txt-product py-2 px-3">
            <div
              class="font-bold text-[#273A97] lg:text-xl md:text-lg text-base"
            >
              Rice <br />
              Series
            </div>
            <p class="mt-4">Gluten-free noodle</p>
          </div>
          <div
            class="img-product h-48 p-4 flex flex-col justify-center justify-center bg-center text-right overflow-hidden"
          >
            <img src="/images/product-2.png" class="mx-auto" />
          </div>
        </div>
      </div>
      <div
        class="bg-white rounded-[35px] shadow-lg w-96 h-full p-5"
        style="box-shadow: 0px 8px 31px #00000029"
      >
        <div class="">
          <img src="/images/product-mix.png" class="w-60 mx-auto" />
        </div>
        <div class="mt-8 w-full">
          <div
            class="button-highlight-home relative bg-[#EC2029] text-white rounded-full w-40 mx-auto"
            @mouseover="hovered = true"
            @mouseleave="hovered = false"
          >
            <div
              class="text-highlight-home font-bold lg:px-12 lg:py-2 px-6 py-2 lg:text-base md:text-sm text-sm"
            >
              View All
            </div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { useFetch } from "nuxt/app";
import { useLanguageStore } from "~/stores/lang";

const languageStore = useLanguageStore;
const appConfig = useAppConfig();

const { data: catproducts } = await useFetch(appConfig.api.url + "/api/category?lang=" + languageStore().activeLang.value, {
  method: "GET",
  headers: {
    "Accept-Language": languageStore().activeLang.value,
  },
});
</script>

<script>
export default {
  data() {
    return {
      hovered: false,
    };
  },
};
</script>

<style>
.card-product {
  &:hover {
    transition: all 0.3s ease-out;
    padding-left: 10px;
    padding-right: 10px;
    & .txt-product {
      margin-right: 8px;
      transition: all 0.3s ease-out;
    }
    & .img-product {
      margin-left: 8px;
      transition: all 0.3s ease-out;
    }
  }
}
.button-highlight-home {
  border-radius: 50px;
  background: linear-gradient(to right, #273a97 50%, #ec1f29 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.5s ease-out;
}

.button-highlight-home:hover {
  background-position: left bottom;
}

.text-highlight-home {
  text-align: center;
  font-size: 16px;
  color: white;
  transition: all 0.6s ease-out;
  display: block;
}
.text-highlight {
  text-align: center;
  font-size: 16px;
  color: white;
  padding: 2px 6px;
  transition: all 0.6s ease-out;
  display: block;
}

.text-highlight-home:hover {
  color: white;
}
.padding-x {
  padding-right: 8rem;
  padding-left: 8rem;
}

@media only screen and (max-width: 1367px) {
  .padding-x {
    padding-right: 2.5rem;
    padding-left: 2.5rem;
  }
}
@media only screen and (max-width: 600px) {
  .padding-x {
    padding-right: 2.5rem;
    padding-left: 2.5rem;
  }
}
</style>
