<template>
	<section class="customer__section">
			<mini-title>
				{{ $t("ourCustomers") }}
			</mini-title>
			<h2 class="customer__title">
				{{ $t("our customers") }}
			</h2>
			<div class="customer__slider">
					<a v-for="customer in dataSource"
					   :key="customer.id"
					   :href="customer.link"
					   target="_blank"
					   rel="nofollow"
					   class="customer__item">
					   <picture  v-if="customer.logo">
						<source :srcset="getAvif(customer.logo)"
							  />
						<img :src="customer.logo"
							 :alt="customer.name"
							 class="customer__logo"
							 decoding="async"
							 width="192"
							 height="70"
							 loading="lazy" />
					   </picture>
						
					</a> 
			</div>
		</section>
</template>
<script>
import miniTitle from "@/components/shared/other/section_mini_title";
import VueSlickCarousel from "vue-slick-carousel";
import { convertImagePathToAvif} from "../../../helper/helper";


export default {
	name: "HomeCustomersSection",
	components: {
		miniTitle, 
		VueSlickCarousel,
	},
 
	props: {
		dataSource: {
			required: true,
			type: Array,
		},
	},
	methods: {
		getAvif(value) {
			return convertImagePathToAvif(value);
		}
	}
};
</script>
<style lang="scss" scoped>
.customer {
	&__section {
		content-visibility: auto;
		margin: 0 auto;
		max-width: $app-max-width;
		padding: $home-sections-padding $padding-default;
		position: relative;
	}

	&__slider {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 4px;
		margin-top: $padding-default;
		overflow-y: auto;
		max-height: 280px;
	}

	&__item {
		background-color: $color-white--dark2;
		border-radius: 4px;
		display: inline-block;
		 
		overflow: hidden;
		position: relative;
		padding: 4px;
		text-decoration: none;
		vertical-align: top;
		width: 160px;

		&:after {
			content: "";
			display: block;
			padding-top: 27.5%;
		}

		
	}

	&__logo {
		object-fit: contain;
		height: 90%;
		filter: grayscale(1);
		position: absolute;
		right: 5%;
		top: 5%;
		width: 90%;

		&:hover {
			filter: grayscale(0);
		}
	}

	&__title {
		color: $color-text;
		font-size: 18px;
		font-weight: bold;
		line-height: 1.8;
		margin: 0 auto;
		padding: 0;
	}

 

	@media (min-width: $desktop) {

		&__section {
			padding: $home-sections-padding--tablet $padding-default;
		}
		
		&__slider {
			overflow-y: visible;
			max-height: none;
			gap: 8px
		}

			&__title {
				margin-left: 0;
				margin-right: auto;
			}
	}
}

 
</style>