'use client';

import { TestimonialCard } from './TestimonialCard';

interface Testimonial {
  id: string | number;
  text: string;
  author: string;
  role: string;
  rating: number;
}

interface TestimonialsSectionProps {
  testimonials: Testimonial[];
}

export function TestimonialsSection({ testimonials }: TestimonialsSectionProps) {
  if (!testimonials || testimonials.length === 0) {
    return null;
  }

  return (
    <div className="bg-white rounded-[20px] p-8">
      <h2 className="text-[20px] font-bold text-[#00293D] font-fractul leading-[24px] text-center mb-4">Testimonials</h2>
      <div className="w-full h-px bg-[#00293D]/20 mb-4" />
      <p className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] text-center mb-8">
        Clients rate our real estate services 4.9 out of 5 on average, based on recent client reviews.
      </p>
      <div className="flex flex-col lg:grid lg:grid-cols-3 gap-6">
        {testimonials.map((testimonial) => (
          <TestimonialCard
            key={testimonial.id}
            text={testimonial.text}
            author={testimonial.author}
            role={testimonial.role}
            rating={testimonial.rating}
          />
        ))}
      </div>
    </div>
  );
}
