{% comment %}
Reusable card component for consistent styling across the application.
Usage: {% include 'components/card.html' with title="Card Title" content="Card content" %}
{% endcomment %}

<div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 overflow-hidden {{ extra_classes|default:'' }}">
    {% if image_url %}
    <div class="aspect-w-16 aspect-h-9">
        <img 
            src="{{ image_url }}" 
            alt="{{ image_alt|default:title }}"
            class="w-full h-48 object-cover"
            loading="lazy"
        >
    </div>
    {% endif %}
    
    <div class="p-6">
        {% if title %}
        <h3 class="text-xl font-semibold text-gray-900 mb-2">
            {% if link_url %}
                <a href="{{ link_url }}" class="hover:text-blue-600 transition-colors">
                    {{ title }}
                </a>
            {% else %}
                {{ title }}
            {% endif %}
        </h3>
        {% endif %}
        
        {% if subtitle %}
        <p class="text-sm text-gray-500 mb-3">{{ subtitle }}</p>
        {% endif %}
        
        {% if content %}
        <div class="text-gray-700 mb-4">
            {{ content|truncatewords:30 }}
        </div>
        {% endif %}
        
        {% if tags %}
        <div class="flex flex-wrap gap-2 mb-4">
            {% for tag in tags %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                {{ tag }}
            </span>
            {% endfor %}
        </div>
        {% endif %}
        
        {% if stats %}
        <div class="flex items-center justify-between text-sm text-gray-500 mb-4">
            {% for stat in stats %}
            <div class="flex items-center">
                {% if stat.icon %}
                <i class="{{ stat.icon }} mr-1"></i>
                {% endif %}
                <span>{{ stat.label }}: {{ stat.value }}</span>
            </div>
            {% endfor %}
        </div>
        {% endif %}
        
        {% if actions %}
        <div class="flex items-center justify-between pt-4 border-t border-gray-200">
            {% for action in actions %}
            <a 
                href="{{ action.url }}" 
                class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
            >
                {% if action.icon %}
                <i class="{{ action.icon }} mr-1"></i>
                {% endif %}
                {{ action.label }}
            </a>
            {% endfor %}
        </div>
        {% endif %}
    </div>
</div>