<script lang="ts">
	import Card from "$lib/components/ui/card/card.svelte";
	import CardContent from "$lib/components/ui/card/card-content.svelte";
	import {
		Carousel,
		CarouselContent,
		CarouselItem,
		CarouselPrevious,
		CarouselNext,
	} from "$lib/components/ui/carousel";

	import { StarIcon } from "@lucide/svelte";
	import Icon from "../atoms/icon.svelte";
	import { cn } from "$lib/utils";
	import MaxWidthWrapper from "../molecules/max-width-wrapper.svelte";

	type Testimonial = {
		id: number;
		name: string;
		role: string;
		message: string;
		avatar: string;
		rating: number;
	};

	const testimonials: Testimonial[] = [
		{
			id: 1,
			name: "Sarah Johnson",
			role: "Business Traveler",
			message:
				"FlyTicketTravel made my business trips so much easier. Their intuitive booking platform and exceptional customer service saved me hours of planning time.",
			avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=2487&ixlib=rb-4.0.3",
			rating: 5,
		},
		{
			id: 2,
			name: "Michael Chen",
			role: "Adventure Seeker",
			message:
				"I've used many flight booking platforms, but FlyTicketTravel stands out with their competitive prices and flexible cancellation policies. My go-to for all my adventures!",
			avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=2187&ixlib=rb-4.0.3",
			rating: 4,
		},
		{
			id: 3,
			name: "Emma Rodriguez",
			role: "Family Traveler",
			message:
				"Booking flights for the whole family used to be stressful until I discovered FlyTicketTravel. Their group booking feature and 24/7 support made our vacation planning seamless.",
			avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&q=80&w=2564&ixlib=rb-4.0.3",
			rating: 5,
		},
		{
			id: 4,
			name: "James Wilson",
			role: "Digital Nomad",
			message:
				"As someone who travels constantly, I appreciate FlyTicketTravel's rewards program and their mobile app that lets me book flights from anywhere in the world.",
			avatar: "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?auto=format&fit=crop&q=80&w=2662&ixlib=rb-4.0.3",
			rating: 5,
		},
	];
</script>

<MaxWidthWrapper cls="py-24 px-4">
	<div class="mx-auto mb-16 max-w-3xl text-center">
		<h2 class="mb-4 text-3xl font-bold md:text-4xl">
			What Our Customers Say
		</h2>
		<p class="text-lg text-muted-foreground">
			Don't just take our word for it – hear what our satisfied customers
			have to say about their FlyTicketTravel experience.
		</p>
	</div>

	<Carousel
		opts={{
			align: "start",
			loop: true,
		}}
		class="w-full"
	>
		<CarouselContent>
			{#each testimonials as testimonial}
				<CarouselItem class="p-2 px-4 md:basis-1/2 lg:basis-1/3">
					<Card class="h-full">
						<CardContent class="flex h-full flex-col p-6">
							<div class="mb-4 flex items-center">
								{#each Array(5) as _, i}
									<Icon
										icon={StarIcon}
										cls={cn(
											"h-5 w-5",
											i < testimonial.rating
												? "text-brand-500"
												: "text-muted-foreground",
										)}
									/>
								{/each}
							</div>

							<p class="mb-6 flex-grow italic">
								{testimonial.message}
							</p>

							<div class="flex items-center">
								<img
									src={testimonial.avatar}
									alt={testimonial.name}
									class="mr-4 h-12 w-12 rounded-full object-cover"
								/>
								<div>
									<h4 class="font-semibold">
										{testimonial.name}
									</h4>
									<p class="text-sm text-muted-foreground">
										{testimonial.role}
									</p>
								</div>
							</div>
						</CardContent>
					</Card>
				</CarouselItem>
			{/each}
		</CarouselContent>
		<div class="mt-8 flex justify-center gap-0">
			<CarouselPrevious class="relative" />
			<CarouselNext class="relative" />
		</div>
	</Carousel>
</MaxWidthWrapper>
