<%# locals: (category:) %>
<% category ||= Category.uncategorized %>

<div>
  <span class="flex items-center gap-1 text-sm font-medium rounded-full px-1.5 py-1 border truncate"
        style="
          background-color: color-mix(in srgb, <%= category.color %> 5%, white);
          border-color: color-mix(in srgb, <%= category.color %> 30%, white);
          color: <%= category.color %>;">
    <% if category.lucide_icon.present? %>
      <%= lucide_icon category.lucide_icon, class: "w-4 h-4 shrink-0" %>
    <% end %>
    <%= category.name %>
  </span>

</div>
