import { isValidElement } from 'react';

export type TestimonialsProps = {
  heading?: string;
  testimonials?: Array<{ quote: string; name: string; role: string; avatarUrl?: string }>;
};

export default function Testimonials({ heading = '', testimonials = [] }: TestimonialsProps) {
  return (
    <section id="testimonials" className="scroll-mt-20 bg-background py-20 sm:py-28">
      <div className="section-shell">
        <div className="max-w-2xl">
          <h2 className="text-4xl font-normal leading-[0.98] tracking-[-0.04em] sm:text-5xl lg:text-6xl">{heading}</h2>
        </div>
        <div className="mt-12 grid gap-4 lg:grid-cols-3">
          {testimonials.map((testimonial, index) => (
            <figure key={index} className="flex min-h-72 flex-col pt-7">
              <blockquote className="text-xl font-normal leading-8 tracking-[-0.02em]">“{testimonial.quote}”</blockquote>
              <figcaption className="mt-auto flex items-center gap-3 pt-10">
                {testimonial.avatarUrl ? <img src={testimonial.avatarUrl} alt="" className="size-10 rounded-full object-cover" /> : <span aria-hidden="true" className="flex size-10 items-center justify-center rounded-full bg-muted text-sm font-semibold">{getInitial(testimonial.name)}</span>}
                <span><span className="block text-sm font-medium">{testimonial.name}</span><span className="block text-xs text-muted-foreground">{testimonial.role}</span></span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function getInitial(value: unknown): string {
  if (typeof value === 'string' || typeof value === 'number') {
    return String(value).trim().charAt(0).toUpperCase() || '•';
  }

  if (Array.isArray(value)) {
    for (const child of value) {
      const initial = getInitial(child);
      if (initial !== '•') return initial;
    }
  }

  if (isValidElement<{ children?: unknown }>(value)) {
    return getInitial(value.props.children);
  }

  return '•';
}