"use client";

import { Star } from "lucide-react";
import { SliderRow } from "@/components/ui/SliderRow";
import type { Testimonial } from "@/generated/prisma/client";

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

  return (
    <div className="w-full">
      <p className="text-xs font-bold text-merah-ranata tracking-wider uppercase mb-1">
        KATA MEREKA
      </p>
      <h2 className="text-2xl md:text-3xl font-semibold text-heading mb-8">
        Apa kata pelanggan kami
      </h2>

      <div className="relative">
        <SliderRow>
          {testimonials.map((testi) => (
            <div key={testi.id} className="w-full flex-shrink-0 px-2 pb-6 pt-2">
              <div className="bg-white rounded-2xl p-6 shadow-[0_4px_20px_-4px_rgba(0,0,0,0.1)] h-full flex flex-col border border-gray-50">
                <div className="flex gap-1 mb-4">
                  {[...Array(5)].map((_, i) => (
                    <Star
                      key={i}
                      className={`h-4 w-4 ${i < (testi.rating || 0) ? "text-yellow-400 fill-yellow-400" : "text-gray-200"}`}
                    />
                  ))}
                </div>
                <p className="text-body italic text-sm leading-relaxed mb-6 flex-grow">
                  "{testi.text}"
                </p>
                <div className="flex items-center gap-3">
                  {testi.avatarUrl ? (
                    <img
                      src={testi.avatarUrl}
                      alt={testi.author}
                      className="h-10 w-10 rounded-full object-cover"
                    />
                  ) : (
                    <div className="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center">
                      <span className="text-gray-500 font-medium text-sm">
                        {testi.author.charAt(0).toUpperCase()}
                      </span>
                    </div>
                  )}
                  <div>
                    <h4 className="text-sm font-semibold text-heading">{testi.author}</h4>
                    <p className="text-xs text-muted">{testi.location}</p>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </SliderRow>
      </div>
    </div>
  );
}