import type { Comment } from "@/lib/data";
import { formatRelativeTime } from "@/lib/utils";

export function CommentThread({ comments }: { comments: Comment[] }) {
  if (comments.length === 0) {
    return (
      <p className="py-6 text-center text-sm text-muted-foreground">
        Aucun commentaire pour l&apos;instant. Lance la discussion !
      </p>
    );
  }

  return (
    <ul className="flex flex-col gap-4">
      {comments.map((comment) => (
        <li key={comment.id} className="flex flex-col gap-0.5">
          <div className="flex items-baseline gap-2 text-sm">
            <span className="font-medium">{comment.author}</span>
            <span className="text-muted-foreground">
              {formatRelativeTime(comment.created_at)}
            </span>
          </div>
          <p className="whitespace-pre-wrap text-sm">{comment.body}</p>
        </li>
      ))}
    </ul>
  );
}