Comment thread

import * as React from "react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

type Comment = {
  id: string;
  author: string;
  /** Display text for when it was posted, for example "2h ago". */
  time: string;
  body: string;
  replies?: Comment[];
};

type CommentThreadProps = Omit<React.ComponentProps<"ul">, "children"> & {
  comments: Comment[];
  /** Replies nest this deep, then stay at the same indent. */
  maxDepth?: number;
};

function initials(name: string) {
  return name
    .split(" ")
    .map((part) => Array.from(part)[0])
    .filter(Boolean)
    .slice(0, 2)
    .join("")
    .toUpperCase();
}

function Item({ comment, depth, maxDepth }: { comment: Comment; depth: number; maxDepth: number }) {
  const replies = comment.replies ?? [];
  return (
    <li className="flex flex-col gap-3">
      <article className="flex gap-3" aria-label={`Comment by ${comment.author}`}>
        <Avatar size="sm" aria-hidden="true" className="mt-0.5">
          <AvatarFallback className="bg-muted text-xs text-foreground">{initials(comment.author)}</AvatarFallback>
        </Avatar>
        <div className="min-w-0 flex-1">
          <p className="m-0 flex items-baseline gap-2 text-sm">
            <span className="font-medium text-foreground">{comment.author}</span>
            <span className="font-mono text-xs text-muted-foreground">{comment.time}</span>
          </p>
          <p className="m-0 mt-0.5 text-sm [overflow-wrap:anywhere] text-foreground/90">{comment.body}</p>
        </div>
      </article>
      {replies.length > 0 && (
        <ul
          aria-label={`Replies to ${comment.author}`}
          className={cn(
            "m-0 flex list-none flex-col gap-3 p-0",
            depth < maxDepth ? "ml-3 border-l border-border pl-5" : "",
          )}
        >
          {replies.map((reply) => (
            <Item key={reply.id} comment={reply} depth={depth + 1} maxDepth={maxDepth} />
          ))}
        </ul>
      )}
    </li>
  );
}

/**
 * A comment thread with nested replies. Each level is a real nested list with a hairline
 * rail on the left, and the rail stops at `maxDepth` so deep threads do not squeeze the text.
 */
export function CommentThread({ comments, maxDepth = 2, className, ...props }: CommentThreadProps) {
  return (
    <ul aria-label="Comments" className={cn("m-0 flex w-full list-none flex-col gap-4 p-0", className)} {...props}>
      {comments.map((comment) => (
        <Item key={comment.id} comment={comment} depth={0} maxDepth={maxDepth} />
      ))}
    </ul>
  );
}