import { Reveal } from '@/components/ui/reveal';

export interface TestimonialData {
  quote: string;
  authorName: string;
  authorRole?: string;
  companyName?: string;
}

// Intentionally renders null when empty rather than falling back to
// placeholder quotes — fabricated testimonials are not acceptable.
export function Testimonials({ items }: { items: TestimonialData[] }) {
  if (items.length === 0) return null;

  return (
    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {items.map((item, i) => (
        <Reveal key={i} variant="up" delay={(i % 3) * 90} className="h-full">
          <figure className="relative flex h-full flex-col rounded-2xl border border-graphite-800/10 bg-white p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-copper-600/10">
            <span
              className="absolute inset-x-0 top-0 h-1 rounded-t-2xl bg-gradient-to-r from-copper-500 via-copper-400 to-transparent"
              aria-hidden="true"
            />
            <blockquote className="flex-1 text-graphite-900/80">
              <span className="text-copper-500">"</span>
              {item.quote}
              <span className="text-copper-500">"</span>
            </blockquote>
            <figcaption className="mt-5 flex items-center gap-3">
              <span className="flex h-9 w-9 items-center justify-center rounded-full bg-graphite-800/5 text-xs font-bold text-copper-600">
                {item.authorName.slice(0, 2).toUpperCase()}
              </span>
              <span className="text-sm">
                <span className="block font-semibold">{item.authorName}</span>
                {(item.authorRole || item.companyName) && (
                  <span className="block text-graphite-900/50">
                    {[item.authorRole, item.companyName].filter(Boolean).join(', ')}
                  </span>
                )}
              </span>
            </figcaption>
          </figure>
        </Reveal>
      ))}
    </div>
  );
}