'use client'

import * as motion from 'framer-motion/m'
import SectionTitle from '@/components/frontend/SectionTitle'
import type { Testimonial } from '@/lib/db/queries/getTestimonials'

interface TestimonialsSectionClientProps {
  testimonials: Testimonial[]
  title: string
}

// Client-only for the framer-motion entrance animation — data (approved,
// admin-curated reviews) and copy are resolved server-side by
// TestimonialsSection.tsx, see DATA_FETCHING_PATTERN.md.
export default function TestimonialsSectionClient({ testimonials, title }: TestimonialsSectionClientProps) {
  return (
    <div className="bg-gray-50 rounded-3xl p-8 md:p-12 my-16">
      <SectionTitle>{title}</SectionTitle>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
        {testimonials.map((testimonial, index) => (
          <motion.div
            key={testimonial.id}
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: index * 0.1 }}
            whileHover={{ y: -5 }}
            className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-all"
          >
            <div className="text-yellow-400 mb-4">
              {'★'.repeat(testimonial.rating)}
              {'☆'.repeat(5 - testimonial.rating)}
            </div>
            <p className="italic text-gray-600 mb-4">{testimonial.text}</p>
            <div className="font-semibold">— {testimonial.name}</div>
          </motion.div>
        ))}
      </div>
    </div>
  )
}