import { Card, CardContent, CardFooter } from '@/components/ui/card';
import { Star } from 'lucide-react';
 
interface Testimonial {
    id: number;
    quote: string;
    name: string;
    role: string;
    avatarUrl: string;
}
 
const testimonials: Testimonial[] = [
    {
        id: 1,
        quote: 'This UI kit has completely transformed the way I build interfaces. Everything is fast, accessible, and beautifully designed.',
        name: 'Michael Craig',
        role: 'Frontend Developer',
        avatarUrl: 'https://untitledui.com/images/avatars/rayhan-zua',
    },
    {
        id: 2,
        quote: 'We were able to ship our MVP 3x faster thanks to the built-in components and documentation. Highly recommended!',
        name: 'Sophia Turner',
        role: 'Product Designer',
        avatarUrl: 'https://untitledui.com/images/avatars/freya-browning',
    },
    {
        id: 3,
        quote: 'From day one, the developer experience has been smooth. Great patterns, excellent performance, and top-notch support.',
        name: 'James Miller',
        role: 'Software Engineer',
        avatarUrl: 'https://untitledui.com/images/avatars/franklin-mays',
    },
];
 
export default function TestimonialSection() {
    return (
        <section className="py-16 lg:py-32">
            <div className="mx-auto w-full max-w-2xl px-6 lg:max-w-7xl">
                <div className="mx-auto max-w-xl text-center">
                    <h2 className="text-3xl/tight font-semibold tracking-tight sm:text-4xl/tight">What Users Say</h2>
                    <p className="text-muted-foreground mt-4 text-base/7 sm:text-lg/8">
                        Aliquet adipiscing lectus praesent cras sed quis lectus egestas.
                    </p>
                </div>
                <div className="mt-12 grid gap-8 lg:grid-cols-3">
                    {testimonials.map((testimonial: Testimonial) => (
                        <Card key={testimonial.id} className="flex flex-col">
                            <CardContent className="flex-1">
                                <div className="flex gap-2">
                                    {[...Array(5)].map((_, i) => (
                                        <Star key={i} className="size-4 fill-amber-400 text-amber-400" />
                                    ))}
                                </div>
                                <p className="text-muted-foreground mt-4 text-sm/6">{testimonial.quote}</p>
                            </CardContent>
                            <CardFooter>
                                <div className="flex items-center gap-4">
                                    <img className="size-10 rounded-full" src={testimonial.avatarUrl} alt={testimonial.name} />
                                    <div className="flex flex-col gap-0.5">
                                        <span className="text-sm font-medium">{testimonial.name}</span>
                                        <span className="text-muted-foreground text-xs">{testimonial.role}</span>
                                    </div>
                                </div>
                            </CardFooter>
                        </Card>
                    ))}
                </div>
            </div>
        </section>
    );
}