import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Card, CardContent } from "@/components/ui/card"

interface Testimonial {
  content: string
  author: {
    name: string
    title: string
    avatar?: string
  }
}

interface TestimonialSectionProps {
  title: string
  description?: string
  testimonials: Testimonial[]
}

export function TestimonialSection({ title, description, testimonials }: TestimonialSectionProps) {
  return (
    <section className="w-full py-12 md:py-24 lg:py-32">
      <div className="container px-4 md:px-6">
        <div className="flex flex-col items-center justify-center space-y-4 text-center">
          <div className="space-y-2">
            <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">{title}</h2>
            {description && (
              <p className="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400">
                {description}
              </p>
            )}
          </div>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
          {testimonials.map((testimonial, index) => (
            <Card key={index} className="border bg-background">
              <CardContent className="p-6">
                <div className="flex flex-col gap-4">
                  <p className="text-gray-500 dark:text-gray-400 italic">"{testimonial.content}"</p>
                  <div className="flex items-center gap-4">
                    <Avatar>
                      {testimonial.author.avatar && (
                        <AvatarImage
                          src={testimonial.author.avatar || "/placeholder.svg"}
                          alt={testimonial.author.name}
                        />
                      )}
                      <AvatarFallback>{testimonial.author.name.charAt(0)}</AvatarFallback>
                    </Avatar>
                    <div>
                      <p className="font-medium">{testimonial.author.name}</p>
                      <p className="text-sm text-gray-500 dark:text-gray-400">{testimonial.author.title}</p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}