import Image from "next/image";
import type { PublicTestimonial } from "../lib/public-settings";
import { Icon } from "./icons";

function initials(name:string){return name.split(/\s+/).filter(Boolean).slice(0,2).map(part=>part[0]?.toUpperCase()).join("")||"PE"}

export function TestimonialGrid({items,limit}:{items:PublicTestimonial[];limit?:number}){
  const visible=typeof limit==="number"?items.slice(0,limit):items;
  return <div className="testimonial-grid">{visible.map(item=><figure className="testimonial-card" key={item.id}>
    <blockquote>“{item.content}”</blockquote>
    <figcaption><div className="testimonial-person">{item.photoMediaId?<Image unoptimized src={`/api/media/${item.photoMediaId}`} alt={item.photoAltText||`Foto ${item.name}`} width={54} height={54}/>:<span aria-hidden="true">{initials(item.name)}</span>}<div><strong>{item.name}</strong><small>{[item.serviceType,item.area].filter(Boolean).join(" · ")||"Pelanggan Padjajaran Elektrik"}</small></div></div><div className="testimonial-proof">{item.rating&&<span aria-label={`Rating ${item.rating} dari 5`}>★ {item.rating.toLocaleString("id-ID")}/5</span>}<i><Icon name="check"/> Terverifikasi</i>{item.source&&<small>Sumber: {item.source}</small>}</div></figcaption>
  </figure>)}</div>
}