<template>
    <section class="main-categories">
        <Swiper slides-per-view="auto">
            <SwiperSlide v-for="(item, i) in store.items" :key="i">
                <router-link :to="{ path: '/search', query: { category: item.link } }">
                    <img :src="item.headerImage" />
                    <h3>{{ $t(item.name) }}</h3>
                </router-link>
            </SwiperSlide>
        </Swiper>
    </section>
</template>

<script setup>
const store = useCategoriesStore();
</script>

<style lang="scss">
.main-categories {
	@apply w-full flex mt-12 lg:mt-[9.6rem];

	.swiper {
		@apply container py-2 lg:py-4 max-lg:px-4;

		.swiper-wrapper {
			@apply w-max mx-auto;

			.swiper-slide {
				@apply w-max ml-2.5 lg:ml-[1.4rem] last:ml-0;

				a {
					@apply flex flex-col items-center shrink-0;
					@apply w-[6.3rem] gap-2.5 pb-4;
					@apply lg:w-[10.8rem] lg:gap-5 lg:pb-6;

					// &::before {
					// 	@apply content-['_'] h-[5.6rem] lg:h-[10.8rem] rounded-2xl absolute bottom-0 inset-x-0 -z-10;
					// 	@apply shadow-[3px_2px_10px_#87C29A] lg:shadow-[5px_5px_19px_0px_#87C29A,_-5px_-1px_15px_0px_#ffffffcc];
					// 	background: linear-gradient(
					// 		133deg,
					// 		#e9ecef 0%,
					// 		white 100%
					// 	);
					// }

					img {
						@apply w-[4.4rem] h-[4.4rem] rounded-full lg:w-[9.1rem] lg:h-[9.1rem];
					}

					h3 {
						@apply text-[#191919] font-medium font-vazir;
						@apply text-[0.625em] lg:text-[1.1875em];
					}
				}
			}
		}
	}
}
</style>
