<article data-information-block class="border-gold/25 bg-white/90 mx-auto flex h-full max-w-xl flex-col border p-4 shadow-[0_10px_24px_rgba(56,56,56,0.05)] sm:p-5">
    <div class="flex items-start gap-3">
        {% if block.image and block.image.path %}
            <div class="bg-light flex h-12 w-12 shrink-0 items-center justify-center border border-gold/20 p-2 sm:h-14 sm:w-14">
                <twig:Image
                    alt="{{ block.title ?? 'Information' }}"
                    class="h-full w-full"
                    img:class="h-full w-full object-contain"
                    lazy="{{ false }}"
                    quality="{{ 70 }}"
                    responsive="{{ false }}"
                    path="{{ block.image.path }}"
                    imageWidth="96"
                    imageHeight="96"
                />
            </div>
        {% endif %}
        <div class="min-w-0">
            <h3 class="font-serif text-base leading-tight text-dark sm:text-lg">{{ block.title }}</h3>
        </div>
    </div>

    <div class="mt-3 flex-1 text-xs leading-5 text-dark/80 sm:text-sm sm:leading-6 [&_p]:my-0">
        {{ 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="border-dark/15 text-dark hover:border-dark hover:bg-dark inline-flex items-center justify-center self-start border bg-white px-3 py-2 text-[10px] font-semibold tracking-[0.14em] uppercase transition hover:text-white sm:px-4 sm:text-[11px]"
            >
                {{ 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="border-dark/15 text-dark hover:border-dark hover:bg-dark inline-flex cursor-pointer items-center justify-center self-start border bg-white px-3 py-2 text-[10px] font-semibold tracking-[0.14em] uppercase transition hover:text-white sm:px-4 sm:text-[11px]"
                data-action="live#action"
                data-live-action-param="showInformationModal"
                data-live-information-block-id-param="{{ block.id.toString }}"
            >
                {{ block.buttonLabel }}
            </button>
        </div>
    {% endif %}
</article>
