<script>
	import { Star } from 'lucide-svelte';
	import { Avatar } from '@skeletonlabs/skeleton-svelte';
	export let testimonial;

	function getStars(count) {
		return Array(count).fill(0);
	}
</script>

<div class="card preset-filled-surface-50-950 mb-6 h-[320px] max-w-sm rounded-xl p-6 shadow">
	<!-- <h3 class="text-lg font-semibold">{testimonial.title}</h3> -->
	<p class="mt-2 text-sm opacity-60">
		“{testimonial.quote}”
	</p>

	<div class="mt-3 flex text-yellow-500">
		{#each getStars(testimonial.star) as _}
			<Star size={15} fill="currentColor" />
		{/each}
	</div>
	<hr class="my-6 border-neutral-300" />
	<div class="flex items-center">
		<div class="ml-5">
			<p class="text-md font-semibold">{testimonial.name}</p>
		</div>
	</div>
</div>
