{#
    Reusable Card Component

    Parameters:
    - image (string|null): URL of the card image
    - title (string): Card title text
    - description (string|null): Card description text
    - link (string|null): URL for the card link
    - linkText (string): Text for the link (default: "En savoir plus")
    - modifierClass (string|null): Additional CSS class for variants (e.g., "card--project", "card--compact")
#}
<div class="card {{ modifierClass|default('') }}">
    {% if image %}
    <div class="card__image">
        <img src="{{ image }}"
             alt="{{ title }}"
             loading="lazy"
             class="card__img">
    </div>
    {% endif %}

    <div class="card__content">
        <h2 class="card__title">{{ title }}</h2>

        {% if description %}
        <p class="card__description">{{ description }}</p>
        {% endif %}

        {% if link %}
        <a href="{{ link }}" class="card__link">
            {{ linkText|default('En savoir plus') }} →
        </a>
        {% endif %}
    </div>
</div>