import { useState, useEffect } from 'react';
import { ChevronLeft, ChevronRight, Quote } from 'lucide-react';

interface Testimonial {
  name: string;
  avatar?: string;
  role?: string;
  comment: string;
  rating?: number;
}

interface TestimonialsFadeProps {
  pageHeaderBgImg?: string;
  pageHeaderMinVh?: string;
  testimonials?: Testimonial[];
}

export default function TestimonialsFade({
  pageHeaderBgImg,
  pageHeaderMinVh = '40vh',
  testimonials = []
}: TestimonialsFadeProps) {
  const [current, setCurrent] = useState(0);

  const next = () => setCurrent((prev) => (prev + 1) % testimonials.length);
  const prev = () => setCurrent((prev) => (prev - 1 + testimonials.length) % testimonials.length);

  useEffect(() => {
    if (testimonials.length <= 1) return;
    const interval = setInterval(next, 5000);
    return () => clearInterval(interval);
  }, [testimonials.length]);

  if (!testimonials.length) return null;

  return (
    <section>
      <div
        className="relative py-20 bg-gray-900 text-white"
        style={{
          backgroundImage: pageHeaderBgImg ? `linear-gradient(rgba(0,0,0,0.7), url(${pageHeaderBgImg}))` : undefined,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          minHeight: pageHeaderMinVh
        }}
      >
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <Quote className="w-12 h-12 mx-auto mb-6 text-blue-400" />
            
            <div className="relative min-h-[200px]">
              {testimonials.map((t, i) => (
                <div
                  key={i}
                  className={`absolute inset-0 transition-opacity duration-500 ${
                    i === current ? 'opacity-100' : 'opacity-0'
                  }`}
                >
                  <p className="text-xl md:text-2xl mb-6">{t.comment}</p>
                  <div className="flex items-center justify-center gap-4">
                    {t.avatar ? (
                      <img src={t.avatar} alt={t.name} className="w-12 h-12 rounded-full" />
                    ) : (
                      <div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center">
                        {t.name[0]}
                      </div>
                    )}
                    <div className="text-left">
                      <p className="font-medium">{t.name}</p>
                      {t.role && <p className="text-sm text-gray-400">{t.role}</p>}
                    </div>
                  </div>
                </div>
              ))}
            </div>
            
            {testimonials.length > 1 && (
              <div className="flex justify-center gap-2 mt-8">
                <button onClick={prev} className="p-2 bg-white/10 rounded-full hover:bg-white/20">
                  <ChevronLeft className="w-5 h-5" />
                </button>
                <button onClick={next} className="p-2 bg-white/10 rounded-full hover:bg-white/20">
                  <ChevronRight className="w-5 h-5" />
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}