Testimonials Posts

import { Heart, MessageCircle, Repeat2 } from "lucide-react";
import { cn } from "@/lib/utils";

export interface TestimonialsPostsItem {
  name: string;
  handle: string;
  text: string;
  date: string;
  likes: number;
  replies: number;
  reposts: number;
}

export interface TestimonialsPostsProps {
  kicker?: string;
  title?: string;
  posts?: TestimonialsPostsItem[];
  cta?: { label: string; href: string };
  className?: string;
}

const DEFAULT_POSTS: TestimonialsPostsItem[] = [
  { name: "Maya Okafor", handle: "@mayabuilds", text: "shipyard wrote our release notes from PR labels and honestly they're better than mine. friday afternoons are back 🙌", date: "Sep 12", likes: 214, replies: 18, reposts: 31 },
  { name: "Dev Patel", handle: "@devpatel", text: "Hot take: your changelog is a growth channel. Ours drives 11% of trial signups since we moved it to @shipyard.", date: "Sep 9", likes: 489, replies: 42, reposts: 77 },
  { name: "Aiko Tanaka", handle: "@aikot", text: "Release notes in Japanese and German on day one, no agency. Support tickets after launches: −33%.", date: "Sep 3", likes: 132, replies: 9, reposts: 14 },
  { name: "Sam Whitfield", handle: "@samw", text: "Engineers don't hate it. That's the review.", date: "Aug 28", likes: 902, replies: 61, reposts: 120 },
  { name: "Lena Brandt", handle: "@lenab", text: "The in-app widget is 9kb. NINE. Our old announcement tool was 240kb of iframe.", date: "Aug 21", likes: 356, replies: 27, reposts: 45 },
  { name: "Omar Haddad", handle: "@omarh", text: "Set up our changelog + custom domain during a standup. Didn't even miss my turn.", date: "Aug 14", likes: 188, replies: 11, reposts: 19 },
];

const AVATAR_TONES = ["bg-da-primary text-da-primary-fg", "bg-da-accent text-da-accent-fg", "bg-da-secondary text-da-secondary-fg", "bg-da-success text-da-success-fg"];

export function TestimonialsPosts({
  kicker = "[ 06 ] Word on the timeline",
  title = "People are posting about their changelogs. Wild.",
  posts = DEFAULT_POSTS,
  cta = { label: "See 300+ more", href: "#wall-of-love" },
  className,
}: TestimonialsPostsProps) {
  return (
    <section className={cn("da-section da-stroke-b bg-da-bg text-da-fg", className)} aria-labelledby="testimonials-posts-title">
      <div className="da-container">
        <div className="flex flex-wrap items-end justify-between gap-6">
          <div>
            <p className="font-da-mono text-xs font-bold tracking-da-label text-da-muted-fg uppercase">{kicker}</p>
            <h2 id="testimonials-posts-title" className="mt-3 max-w-2xl font-da-display text-[clamp(2rem,5vw,3.5rem)] leading-[0.95] tracking-da-display uppercase">
              {title}
            </h2>
          </div>
          <a href={cta.href} className="da-focus da-stroke bg-da-fg px-5 py-3 font-bold text-da-bg shadow-da-sm hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none">
            {cta.label} →
          </a>
        </div>
        <ul className="mt-12 grid items-start gap-5 md:grid-cols-2 lg:grid-cols-3">
          {posts.map((p, i) => (
            <li key={p.handle}>
              <article className="da-stroke bg-da-surface p-5 text-da-surface-fg shadow-da-md" aria-label={`Post by ${p.name}`}>
                <header className="flex items-center gap-3">
                  <span aria-hidden className={cn("da-stroke grid size-11 place-items-center font-da-display", AVATAR_TONES[i % AVATAR_TONES.length])}>
                    {p.name[0]}
                  </span>
                  <span className="min-w-0 flex-1">
                    <span className="block truncate font-bold">{p.name}</span>
                    <span className="font-da-mono text-xs text-da-muted-fg">
                      {p.handle} · <time>{p.date}</time>
                    </span>
                  </span>
                </header>
                <p className="mt-4 text-[15px] leading-relaxed">{p.text}</p>
                <footer className="da-stroke-t mt-4 flex gap-6 pt-3 font-da-mono text-xs font-bold text-da-muted-fg">
                  <span className="flex items-center gap-1.5">
                    <MessageCircle aria-hidden className="size-4" /> {p.replies}
                    <span className="sr-only">replies</span>
                  </span>
                  <span className="flex items-center gap-1.5">
                    <Repeat2 aria-hidden className="size-4" /> {p.reposts}
                    <span className="sr-only">reposts</span>
                  </span>
                  <span className="flex items-center gap-1.5">
                    <Heart aria-hidden className="size-4" /> {p.likes}
                    <span className="sr-only">likes</span>
                  </span>
                </footer>
              </article>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default TestimonialsPosts;