import React from 'react';
import { Star } from 'lucide-react';

function TestimonialsStorybook() {
  const testimonials = [
    {
      name: 'John Doe',
      role: 'Frontend Developer',
      company: 'TechCorp',
      content: 'This component library has saved us countless hours of development time. The quality is exceptional.',
      rating: 5,
      avatar: '/images/256-1768917228018.png'
    },
    {
      name: 'Jane Smith',
      role: 'Product Manager',
      company: 'StartupXYZ',
      content: 'Clean, modern components that work perfectly out of the box. Highly recommended!',
      rating: 5,
      avatar: '/images/256-1768917228018.png'
    },
    {
      name: 'Mike Johnson',
      role: 'Full Stack Developer',
      company: 'WebAgency',
      content: 'The documentation is excellent and the components are very well designed.',
      rating: 5,
      avatar: '/images/256-1768917228018.png'
    }
  ];

  return (
    <section className="py-16 bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            What developers are saying
          </h2>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Join thousands of developers who trust our components
          </p>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {testimonials.map((testimonial, index) => (
            <div key={index} className="bg-white p-6 rounded-lg shadow-sm">
              <div className="flex items-center mb-4">
                {[...Array(testimonial.rating)].map((_, i) => (
                  <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
                ))}
              </div>
              
              <p className="text-gray-700 mb-4">
                "{testimonial.content}"
              </p>
              
              <div className="flex items-center">
                <img src={testimonial.avatar} alt={testimonial.name} className="w-12 h-12 rounded-full mr-4" />
                <div>
                  <div className="font-semibold text-gray-900">{testimonial.name}</div>
                  <div className="text-sm text-gray-600">{testimonial.role} at {testimonial.company}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export default TestimonialsStorybook;