<%# locals: (label:, period:, value:, trend:, size: "lg", is_percentage: false)%>
<div class="space-y-2">
  <p class="text-sm text-gray-500 font-medium"><%= label %></p>
  <p class="text-gray-900 -space-x-0.5">
    <% if value.is_a?(Money) %>
      <span class="<%= size == "lg" ? "text-xl" : "text-lg" %> font-medium"><%= format_money value %></span>
    <% else %>
      <span class="<%= size == "lg" ? "text-xl" : "text-lg" %> font-medium"><%= is_percentage ? number_to_percentage(value, precision: 2) : value %></span>
    <% end %>
  </p>
  <% if trend.nil? %>
    <p class="text-sm text-gray-500">Data not available for the selected period</p>
  <% elsif trend.direction.flat? %>
    <p class="text-sm text-gray-500">No change vs. prior period</p>
  <% else %>
    <div class="flex items-center gap-2">
      <%= render partial: "shared/trend_change", locals: { trend: trend } %>
      <span class="text-sm text-gray-500"><%= period_label(period) %></span>
    </div>
  <% end %>
</div>
