<script lang="ts">
	import { Skeleton } from '$lib/components/ui/skeleton';

	let { testimonial } = $props();
</script>

<section class="mt-12 flex flex-col gap-8">
	<h5 class="text-center text-4xl font-bold capitalize">Trust that speak for itself</h5>

	{#await testimonial}
		<div class="flex items-center justify-center gap-4">
			{#each Array.from({ length: 10 })}
				<Skeleton class="aspect-[9/16] h-full w-full bg-gray-400"></Skeleton>
			{/each}
		</div>
	{:then reviews}
		<div class="flex items-center justify-center gap-4">
			{#each reviews?.testimonial.slice(0, 4) as review}
				<div class="relative aspect-[9/16] h-full">
					<iframe src={review?.media} title={review?.name} frameborder="0" class="h-full w-full"
					></iframe>
				</div>
			{/each}
		</div>
	{/await}
</section>
