Untitled

import React from 'react';
import { Card, CardContent } from "@/components/ui/card";
import { Star } from 'lucide-react';

const TestimonialCard = ({ rating, text, author }) => (
  <Card className="bg-blue-900 bg-opacity-50 border-blue-700">
    <CardContent className="pt-6">
      <div className="flex justify-center mb-4">
        {[...Array(rating)].map((_, i) => (
          <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
        ))}
      </div>
      <p className="text-center mb-4">{text}</p>
      <p className="text-center font-semibold">{author}</p>
    </CardContent>
  </Card>
);

const TestimonialsSection = () => (
  <section className="py-16 bg-blue-800 bg-opacity-30">
    <div className="container mx-auto px-4">
      <h2 className="text-3xl font-bold mb-12 text-center">What Our Users Say</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <TestimonialCard
          rating={5}
          text={`"This AI tool has revolutionized my creative process. The quality and speed are unmatched!"`}
          author="- Happy User 1"
        />
        <TestimonialCard
          rating={5}
          text={`"I've tried many AI image generators, but this one truly stands out. The results are mind-blowing!"`}
          author="- Happy User 2"
        />
        <TestimonialCard
          rating={5}
          text={`"The advanced artistic styles have opened up a whole new world of possibilities for my projects."`}
          author="- Happy User 3"
        />
      </div>
    </div>

  </section>
);

export default TestimonialsSection;