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

<div class="min-w-0 w-full">
  <span class="flex w-full items-center gap-1 text-sm font-medium rounded-full px-1.5 py-1 border focus-visible:outline-none focus-visible:ring-0"
        style="
          background-color: color-mix(in oklab, <%= category.color %> 10%, transparent);
          border-color: color-mix(in oklab, <%= category.color %> 10%, transparent);
          color: <%= category.color %>;">
    <% if category.lucide_icon.present? %>
      <span class="shrink-0">
        <%= icon category.lucide_icon, size: "sm", color: "current" %>
      </span>
    <% end %>
    <span class="min-w-0 flex-1 truncate" data-testid="category-name"><%= category.name %></span>
  </span>
</div>
