@props(['image', 'title', 'link'])

<div {{ $attributes->merge(['class' => 'bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden flex flex-col']) }}>
    <div class="aspect-square flex items-center justify-center p-8 bg-white relative group">
        <img
            src="/creative/{{ $image }}"
            alt="{{ $title }}"
            title="{{ $title }} - {{ $link }}"
            class="max-w-full h-auto object-contain"
            onload="setImageDimensions(this)"
        >
        <span
            class="dimensions-badge absolute bottom-2 center bg-black/70 text-white text-xs font-mono px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"></span>
    </div>

    <div class="flex border-t border-gray-100">
        <a
            type="button"
            class="flex-1 py-3 px-4 flex items-center justify-center gap-2 text-sm font-medium text-gray-600 hover:bg-gray-50 transition-colors border-r border-gray-100"
            href="{{ $link }}"
            target="_blank"
        >
            Open Link
        </a>

        <button
            type="button"
            class="flex-1 py-3 px-4 flex items-center justify-center text-sm font-medium text-gray-600 hover:bg-gray-50 transition-colors"
            onclick="copyButton(this)"
            data-link="{{ $link }}"
        >
            Copy HTML
        </button>
    </div>
</div>