<script lang="ts">
	import { Button, cn } from '$lib';
	import { type CardData } from '$lib/components/extra/swiper-cards';
	import CardSwiper from '$lib/components/extra/swiper-cards/CardSwiper.svelte';

	import profile1 from '$docs/assets/profiles/0.webp?as=run';
	import profile2 from '$docs/assets/profiles/1.webp?as=run';
	import profile3 from '$docs/assets/profiles/2.webp?as=run';
	import profile4 from '$docs/assets/profiles/3.webp?as=run';
	import profile5 from '$docs/assets/profiles/4.webp?as=run';
	import profile6 from '$docs/assets/profiles/5.webp?as=run';
	import profile7 from '$docs/assets/profiles/6.webp?as=run';
	import profile8 from '$docs/assets/profiles/7.webp?as=run';
	import profile9 from '$docs/assets/profiles/8.webp?as=run';
	import profile10 from '$docs/assets/profiles/9.webp?as=run';
	import Image from '$lib/components/base/image/Image.svelte';

	const profiles = [profile1, profile2, profile3, profile4, profile5, profile6, profile7, profile8, profile9, profile10];

	let swipe: (direction: 'left' | 'right') => void;
</script>

<div class="h-[70vh] w-full relative">
	<CardSwiper
		cardData={(i) => ({
			title: `Card ${i}`,
			description: `Card ${i} description`,
			image: profiles[i % profiles.length]
		})}
		bind:swipe
	>
	</CardSwiper>

<div class="w-full flex justify-between absolute bottom-2 px-2">
	<Button onclick={() => swipe('left')} size="iconLg">
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-6">
			<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
		  </svg>
		  
		  
	</Button>
	<Button onclick={() => swipe('right')} size="iconLg">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
			<path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
		  </svg>
		  
	</Button>
</div>
</div>
