'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;
  }

  const averageRating = testimonials.length > 0
    ? (testimonials.reduce((sum, t) => sum + t.rating, 0) / testimonials.length).toFixed(1)
    : '0.0';

  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 {averageRating} out of 5 on average, based on {testimonials.length} recent client review{testimonials.length !== 1 ? 's' : ''}.
      </p>
      <div className="flex gap-6 overflow-x-auto pb-2 -mx-2 px-2 snap-x snap-mandatory lg:snap-none items-stretch">
        {testimonials.map((testimonial) => (
          <div
            key={testimonial.id}
            className="flex-none w-[85%] sm:w-[45%] lg:w-[calc((100%-3rem)/3)] snap-start"
          >
            <TestimonialCard
              text={testimonial.text}
              author={testimonial.author}
              role={testimonial.role}
              rating={testimonial.rating}
            />
          </div>
        ))}
      </div>
    </div>
  );
}
