Testimonials Posts

import { cn } from "@/lib/utils";

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

export interface TestimonialsPostsProps {
  eyebrow?: string;
  title?: string;
  posts?: TestimonialsPostsItem[];
  className?: string;
}

const DEFAULT_POSTS: TestimonialsPostsItem[] = [
  {
    name: "Maya Chen",
    handle: "mayacodes",
    text: "Tracewise paged me at 3am, I acked from my watch, rolled back from Slack and was asleep by 3:14. Genuinely the best on-call experience I’ve had.",
    date: "Sep 12",
    likes: 842,
  },
  {
    name: "Jonas Ortega",
    handle: "jortega",
    text: "Hot take: the AI postmortem draft is better than most humans write at 10am the next day.",
    date: "Sep 3",
    likes: 311,
  },
  {
    name: "Alia Karim",
    handle: "aliak_sre",
    text: "Moved 38 schedules off our old tool in an afternoon. tracewise.yaml in a PR, reviewed, merged, done. 🫡",
    date: "Aug 28",
    likes: 207,
  },
  {
    name: "Ben Foster",
    handle: "benfoster",
    text: "The fairness report made our night-page imbalance visible for the first time. Two people were carrying 70% of it. Fixed in one sprint.",
    date: "Aug 19",
    likes: 529,
  },
  {
    name: "Sofia Lind",
    handle: "sofialind",
    text: "Status page went degraded 40 seconds after the monitor fired. Customers noticed our update before they noticed the outage.",
    date: "Aug 11",
    likes: 188,
  },
  {
    name: "Kwame Mensah",
    handle: "kwame_dev",
    text: "Alert grouping turned a flapping disk check from 212 pages into 1 incident. I could cry.",
    date: "Jul 30",
    likes: 1204,
  },
  { name: "Lea Martin", handle: "leamartin", text: "Tracewise is one of the rare tools where the Slack bot is actually pleasant.", date: "Jul 22", likes: 96 },
];

function Avatar({ name }: { name: string }) {
  const hue = [...name].reduce((a, c) => a + c.charCodeAt(0), 0) % 3;
  return (
    <span
      aria-hidden
      className={cn(
        "grid size-9 shrink-0 place-items-center rounded-full text-[13px] font-medium",
        hue === 0 && "bg-da-accent text-da-accent-fg",
        hue === 1 && "bg-da-muted text-da-fg",
        hue === 2 && "bg-da-primary text-da-primary-fg",
      )}
    >
      {name
        .split(" ")
        .map((p) => p[0])
        .join("")}
    </span>
  );
}

/** Masonry wall of social-post cards (avatar, handle, text, date, likes) in 1–3 CSS columns. */
export function TestimonialsPosts({
  eyebrow = "Wall of love",
  title = "Engineers sleep better on Tracewise",
  posts = DEFAULT_POSTS,
  className,
}: TestimonialsPostsProps) {
  return (
    <section aria-labelledby="testimonials-posts-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="mx-auto max-w-2xl text-center">
          <p className="font-da-mono text-xs text-da-accent-fg">{eyebrow}</p>
          <h2 id="testimonials-posts-title" className="mt-3 text-[clamp(1.875rem,4vw,2.75rem)] leading-[1.1] font-semibold tracking-da-display text-balance">
            {title}
          </h2>
        </div>
        <ul className="mt-12 gap-4 [column-fill:_balance] sm:columns-2 lg:columns-3">
          {posts.map((p) => (
            <li key={p.handle} className="mb-4 break-inside-avoid">
              <article className="da-stroke rounded-da-lg bg-da-surface p-5 text-da-surface-fg shadow-da-sm">
                <header className="flex items-center gap-3">
                  <Avatar name={p.name} />
                  <div className="min-w-0 text-sm leading-tight">
                    <p className="truncate font-medium">{p.name}</p>
                    <p className="truncate text-da-muted-fg">@{p.handle}</p>
                  </div>
                </header>
                <p className="mt-4 text-[15px] leading-relaxed">{p.text}</p>
                <footer className="mt-4 flex items-center gap-4 font-da-mono text-[11px] text-da-muted-fg">
                  <time>{p.date}</time>
                  {p.likes !== undefined && <span>♥ {p.likes.toLocaleString("en-US")}</span>}
                </footer>
              </article>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default TestimonialsPosts;