<div class="flex justify-center items-center">
  <div class="text-center flex flex-col items-center max-w-[500px]">
    <h2 class="text-lg text-primary font-medium">Oops!</h2>
    <p class="text-secondary text-sm max-w-sm mx-auto mb-4">
      You have not created or assigned any expense categories to your transactions yet.
    </p>

    <div class="flex items-center gap-2">
      <%= button_to "Use default categories", bootstrap_categories_path, class: "btn btn--primary" %>

      <%= link_to new_category_path, class: "btn btn--outline flex items-center gap-1", data: { turbo_frame: "modal" } do %>
        <%= lucide_icon("plus", class: "w-5 h-5") %>
        <span>New category</span>
      <% end %>
    </div>
  </div>
</div>
