<section class="sky-section animated-shadow-sky divide-y">
  <h2 class="section-header">User Stats</h2>
  <% stat_rows_for_user(user).each do |stat_row| %>
    <% label = stat_row.name %>
    <% value = stat_row.value %>
    <% fa_icon_class = stat_row.fa_icon_class %>
    <div class="flex items-center px-4 py-2 gap-2">
      <span class="grow text-slate-900 truncate"><%= label %></span>
      <span class="text-slate-500 relative group">
        <% value_str = case value %>
      <% when Integer %>
        <% number_with_delimiter(value, delimiter: ",") %>
      <% when HasTimestampsWithDueAt::TimestampScanInfo %>
        <% value.ago_in_words %>
      <% else %>
        <% value %>
      <% end %>
      <% if stat_row.link_to %>
        <%= link_to value_str, stat_row.link_to, class: "blue-link" %>
      <% else %>
        <%= value_str %>
      <% end %>
      <% if fa_icon_class %>
        <i class="fa-solid <%= fa_icon_class %>"></i>
      <% end %>
      <% if stat_row.hover_title %>
        <div class="absolute hidden group-hover:block bg-slate-800 text-white text-sm rounded px-2 py-1 top-1/2 -translate-y-1/2 right-full mr-2 whitespace-nowrap">
          <%= stat_row.hover_title %>
        </div>
      <% end %>
    </span>
  </div>
<% end %>
</section>
