<article data-information-block class="flex h-full flex-col border border-primary/12 bg-surface-container-low p-4 shadow-[0_16px_40px_rgba(51,38,28,0.06)] md:p-5">
    <div class="flex items-center gap-3">
        {% if block.image and block.image.path %}
            <div class="flex h-8 w-8 shrink-0 items-center justify-center">
                <twig:Image
                    alt="{{ block.title ?? '' }}"
                    class="h-full w-full"
                    row:class="h-full w-full"
                    img:class="h-full w-full object-contain"
                    lazy="{{ false }}"
                    quality="{{ 70 }}"
                    responsive="{{ false }}"
                    path="{{ block.image.path|image_path }}"
                    imageWidth="96"
                    imageHeight="96"
                />
            </div>
        {% endif %}

        <div class="min-w-0 flex-1">
            <h3 class="font-display text-[22px] leading-tight font-semibold [font-optical-sizing:auto] text-primary">
                {{ block.title }}
            </h3>
            <div class="mt-2 h-px w-12 bg-primary/20"></div>
        </div>
    </div>

    <div class="mt-3 flex-1 text-sm leading-5 text-on-surface-variant [&_p]:my-0 [&_a]:underline [&_a]:underline-offset-4">
        {{ block.description|raw }}
    </div>

    {% if block.actionType == constant('CpCreation\\VitiCore\\Shop\\Model\\InformationBlock::ACTION_LINK') and block.buttonLabel and block.buttonUrl %}
        <div class="mt-4">
            <a
                href="{{ block.buttonUrl }}"
                class="inline-flex min-h-11 items-center justify-center border border-primary bg-primary px-4 py-2 font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-white transition hover:bg-secondary hover:border-secondary"
            >
                {{ block.buttonLabel }}
            </a>
        </div>
    {% elseif block.actionType == constant('CpCreation\\VitiCore\\Shop\\Model\\InformationBlock::ACTION_MODAL') and block.buttonLabel and block.hasModalContent %}
        <div class="mt-4">
            <button
                type="button"
                class="inline-flex min-h-11 cursor-pointer items-center justify-center border border-primary bg-primary px-4 py-2 font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-white transition hover:bg-secondary hover:border-secondary"
                data-action="live#action"
                data-live-action-param="showInformationModal"
                data-live-information-block-id-param="{{ block.id.toString }}"
            >
                {{ block.buttonLabel }}
            </button>
        </div>
    {% endif %}
</article>
