<template>
	<div class="mx-auto text-center md:max-w-xl lg:max-w-3xl mb-3">
		<Heading :level="1" html-tag="h2" v-if="showTitle">{{ title }}</Heading>
		<p v-if="description" class="mb-6 pb-2 text-gray-800 md:mb-12 md:pb-0">
			{{ description }}
		</p>
	</div>

	<div class="grid gap-6 text-center md:grid-cols-3 lg:gap-12">
		<div v-for="(testimonial, index) in testimonials" :key="index" class="mb-12 md:mb-0">
			<p class="mb-4 text-gray-800">
				<span v-if="showQuoteIcon" class="inline-block pe-2" :style="{ color: primaryColor }">
					<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 448 512" class="w-5 h-5">
						<path
							d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z"
						/>
					</svg>
				</span>
				{{ testimonial.comment }}
			</p>
			<ul v-if="showRating" class="mb-0 flex items-center justify-center">
				<li v-for="i in 5" :key="i">
					<svg
						v-if="i <= testimonial.rating"
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 24 24"
						fill="currentColor"
						class="h-5 w-5"
						:style="{ color: starColor }"
					>
						<path
							fill-rule="evenodd"
							d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
							clip-rule="evenodd"
						/>
					</svg>
					<svg
						v-else
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke-width="1.5"
						stroke="currentColor"
						class="h-5 w-5"
						:style="{ color: starColor }"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"
						/>
					</svg>
				</li>
			</ul>
		</div>
	</div>
</template>

<script lang="ts" setup>
interface Testimonial {
	name?: string;
	role?: string;
	avatar?: string;
	comment: string;
	rating: number;
}

withDefaults(
	defineProps<{
		testimonials: Testimonial[];
		title?: string;
		description?: string;
		primaryColor?: string;
		starColor?: string;
		showTitle?: boolean;
		showName?: boolean;
		showRole?: boolean;
		showAvatar?: boolean;
		showRating?: boolean;
		showQuoteIcon?: boolean;
	}>(),
	{
		title: "Kundenstimmen",
		description: "",
		primaryColor: "black",
		starColor: "#fbbf24",
		showTitle: true,
		showName: true,
		showRole: true,
		showAvatar: true,
		showRating: true,
		showQuoteIcon: true
	}
);
</script>
