import type { Testimonial } from "@/lib/proposal/profile";

type Props = {
  testimonials: Testimonial[];
  page: number;
  totalPages: number;
};

export function TestimonialsSection({ testimonials, page, totalPages }: Props) {
  const perPage = 9;
  const slice = testimonials.slice((page - 1) * perPage, page * perPage);

  return (
    <div className="h-full flex flex-col px-16 py-24 space-y-8">
      <div>
        <p className="text-xs font-mono tracking-widest text-muted-foreground uppercase">
          Pagina {page} di {totalPages} · Cosa dicono di me
        </p>
        <h2 className="text-4xl font-light text-foreground mt-4">
          Una selezione dalle <span className="text-primary">testimonianze</span> di chi vi ha preceduto.
        </h2>
      </div>

      <div className="grid grid-cols-3 gap-4 flex-1">
        {slice.map((t, i) => (
          <div key={i} className="border border-border rounded-lg p-5 space-y-3 flex flex-col">
            <div className="flex items-center gap-3">
              <div className="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center text-sm font-medium text-primary shrink-0">
                {t.name[0]}
              </div>
              <div>
                <p className="text-sm font-medium text-foreground leading-tight">{t.name}</p>
                <p className="text-xs font-mono text-primary">{t.role}</p>
              </div>
            </div>
            <p className="text-sm text-muted-foreground italic leading-relaxed flex-1">
              &ldquo;{t.quote}&rdquo;
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}
