<template>
<section class="products__section">
		<h2 class="products__section__title">
			{{ $t("new products") }}

			<nuxt-link :to="localePath('/products')" class="products__section__show-more">
				<span class="products__section__show-more__text">
					{{ $t("view all products") }}
				</span>
				<i class="icon-arrow_back products__section__show-more__icon" />
			</nuxt-link>
		</h2>
		<product-card
			v-for="product in dataSource"
			:key="product.id"
			:data-source="product"
		/>
	</section>
</template>
<script>
import productCard from "@/components/product/product_card";
import LazyHydrate from "vue-lazy-hydration";

export default {
	name: "HomeProductsSection",
	components: {
		productCard,
		LazyHydrate
	},
	props: {
		dataSource: {
			required: true,
			type: Array,
		},
	},
};
</script>
<style lang="scss" scoped>
.products__section {
	content-visibility: auto;
	margin: 0 auto;
	max-width: $app-max-width;
	padding: $home-sections-padding 0;
	position: relative;

	&__title {
		color: $color-text--light;
		font-size: 16px;
		font-weight: bold;
		padding: 0 $padding-default;
		margin: 0 auto;
		margin-bottom: $padding-default;
	}

	&__show-more {
		color: $color-text--light;
		float: left;
		font-size: 14px;
		font-weight: normal;
		text-decoration: none;

		&__text {
			display: none;
		}

		&__icon {
			$size: 24px;

			background: $color-accent;
			border-radius: 50%;
			color: $color-white;
			display: inline-block;
			font-size: 18px;
			height: $size;
			line-height: $size;
			text-align: center;
			vertical-align: middle;
			width: $size;
		}

		&:hover {
			color: $color-primary;
			.products__section__show-more__icon {
				background: $color-primary;
			}
		}

		@media (min-width: $tablet) {
			&__text {
				display: inline-block;
				margin: 0 5px;
				vertical-align: middle;
			}
		}
	}

	@media (min-width: $tablet) {
		padding: $home-sections-padding--desktop 0;
		&__title {
			padding: 0 $padding-default / 2;
		}
	}
}

[data-lang="en"] {
	.products__section {
		&__show-more {
			float: right;

			&__icon {
				transform: rotate(180deg);
			}
		}
	}	
}
</style>