---
import { Star } from "lucide-react";

const {
    variant = "lime",
    testimonials = [
        {
            name: "Amber J.",
            image: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=3276&auto=format&fit=crop",
            stars: 5,
            review: "Switching to this service was the best decision for our family. The internet speed is consistently fast, and the TV service offers an amazing selection of channels. Customer service has been exceptional whenever we needed help.",
        },
        {
            name: "Mike L.",
            image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=3387&auto=format&fit=crop",
            stars: 5,
            review: "I've been a customer for over 2 years now, and I'm impressed with the reliability of their services. The bundle package offers great value, and the internet speeds are perfect for my work-from-home needs.",
        },
        {
            name: "Emma M.",
            image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=3361&auto=format&fit=crop",
            stars: 5,
            review: "The installation was quick and professional, and the service has been rock-solid ever since. I particularly love the DVR features and the ability to stream on multiple devices. Definitely worth every penny!",
        },
    ],
} = Astro.props;

// Map variant to color classes for stars
const variantColorMap = {
    blue: "text-primary",
    lime: "text-lime-500",
    amber: "text-amber-500",
};
const starColor =
    variantColorMap[variant as keyof typeof variantColorMap] || "text-primary";
---

<section class="bg-white">
    <div
        class="mx-auto max-w-(--breakpoint-xl) px-4 py-12 sm:px-6 lg:px-8 lg:py-16"
    >
        <h2
            class="text-center text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl"
        >
            Read trusted reviews from our customers
        </h2>

        <div class="mt-8 grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-8">
            {
                testimonials.map((testimonial: any) => (
                    <blockquote class="rounded-lg bg-gray-50 p-6 shadow-xs sm:p-8">
                        <div class="flex items-center gap-4">
                            <img
                                alt={`${testimonial.name}'s profile picture`}
                                src={testimonial.image}
                                class="size-14 rounded-full object-cover"
                            />

                            <div>
                                <div
                                    class={`flex justify-center gap-0.5 ${starColor}`}
                                >
                                    {Array(testimonial.stars)
                                        .fill(null)
                                        .map((_, i) => (
                                            <Star
                                                key={i}
                                                className="h-5 w-5 fill-current"
                                            />
                                        ))}
                                </div>

                                <p class="mt-0.5 text-lg font-medium text-gray-900">
                                    {testimonial.name}
                                </p>
                            </div>
                        </div>

                        <p class="mt-4 text-gray-700">{testimonial.review}</p>
                    </blockquote>
                ))
            }
        </div>
    </div>
</section>
