import type { TestimonialsPayload } from '@/types/api';
import { SmartImage } from '@/components/ui';

export function Testimonials({ payload }: { payload: TestimonialsPayload }) {
  return (
    <section className="py-12 md:py-16 bg-secondary-50">
      <div className="mx-auto max-w-7xl px-4">
        {payload.title ? (
          <h2 className="font-heading text-2xl md:text-3xl font-bold text-neutral-900 text-start mb-8">
            {payload.title}
          </h2>
        ) : null}
        <div className="grid md:grid-cols-3 gap-5">
          {payload.items.map((item, i) => (
            <figure
              key={i}
              className="bg-white rounded-xl p-6 border border-neutral-200"
            >
              <blockquote className="text-neutral-700 text-sm leading-relaxed">
                &ldquo;{item.quote}&rdquo;
              </blockquote>
              <figcaption className="mt-5 flex items-center gap-3">
                <SmartImage
                  src={item.avatar_url}
                  alt=""
                  fallbackCategory="avatar"
                  fallbackSeed={item.author}
                  className="h-9 w-9 rounded-full flex-shrink-0"
                  imgClassName="h-9 w-9 rounded-full object-cover"
                />
                <span className="text-sm font-medium text-neutral-900">{item.author}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}