{# Macro empty_state
   Uso:
     {% from "dg/components/empty_state.html" import empty_state %}
     {{ empty_state(
         icon_name="package",
         title="Sin apps todavía",
         description="Crea un proyecto o ejecuta dg up.",
         cta_label="Crear proyecto",
         cta_href="/projects/new"
     ) }}
#}
{% from "dg/components/icon.html" import icon %}

{% macro empty_state(title, description="", icon_name="package", cta_label="", cta_href="") %}
<div class="flex flex-col items-center justify-center py-20 text-center max-w-sm mx-auto">
  <div class="w-14 h-14 rounded-full bg-surface-subtle flex items-center justify-center mb-4 text-fg-muted">
    {{ icon(icon_name, class="w-7 h-7") }}
  </div>
  <p class="text-base font-semibold text-fg">{{ title }}</p>
  {%- if description %}
  <p class="text-sm text-fg-muted mt-1 leading-relaxed">{{ description }}</p>
  {%- endif %}
  {%- if cta_label and cta_href %}
  <a href="{{ cta_href }}" class="btn btn-primary mt-5">{{ cta_label }}</a>
  {%- endif %}
</div>
{%- endmacro %}