{% comment %}
Component: Empty State (c-empty)
Props:
  title: Main heading
  body: Description text
  variant: first-use | no-results | error (default: first-use)
  icon: icon name
  action_label: CTA button label
  action_href: CTA button url
  classes: custom classes
{% endcomment %}
<div class="c-empty max-w-lg mx-auto w-full p-8 flex flex-col items-center justify-center text-center{% if classes %} {{ classes }}{% endif %}">
    <div class="w-12 h-12 rounded-full bg-surface-sunken flex items-center justify-center text-muted mb-4" aria-hidden="true">
        {% if variant == "error" %}
        <svg class="w-6 h-6 text-danger" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
        {% elif variant == "no-results" %}
        <svg class="w-6 h-6 text-subtle" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
        {% else %}
        <svg class="w-6 h-6 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M12 8v8"/><path d="M8 12h8"/></svg>
        {% endif %}
    </div>
    {% if title %}
    <h3 class="text-base font-semibold text-text mb-1">{{ title }}</h3>
    {% endif %}
    {% if body %}
    <p class="text-sm text-muted max-w-sm mb-6">{{ body }}</p>
    {% endif %}
    {% if action_label and action_href %}
    <a href="{{ action_href }}" class="c-button c-button--primary c-button--md">
        <span>{{ action_label }}</span>
    </a>
    {% endif %}
</div>