<div class="flex items-start space-x-4">
  <div class="flex-shrink-0">
    <%# Add user avatars here if you have them %>
    <div class="h-10 w-10 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 font-bold">
      <%= comment.user&.name&.first || 'A' %>
    </div>
  </div>
  <div class="flex-1">
    <div class="bg-slate-100 rounded-lg p-3">
      <div class="flex items-center justify-between">
        <p class="text-sm text-slate-900">
          <span class="font-semibold "><%= comment.user&.name || "Anonymous" %></span>
          <% unless comment.language_code.blank? %>
            <span class="italic">on the <%= language_name(comment.language_code) %> translation</span>
          <% end -%>
        </p>
        <p class="text-xs text-slate-500">
        <%= comment.created_at ? "#{time_ago_in_words(comment.created_at)} ago" : "just now" %>
        </p>
      </div>
      <p class="text-sm text-slate-800 mt-1"><%= comment.body %></p>
    </div>
  </div>
</div>
