<div x-data="{ label: 'Click me', action: () => alert('Button clicked!') }">
    <button @click="action" class="px-4 py-2 bg-blue-500 text-white rounded">
        <span x-text="label"></span>
    </button>
</div>

<template id="card-template">
    <div class="p-4 border rounded shadow">
        <h2 class="text-lg font-bold" x-text="title"></h2>
        <p class="text-gray-600" x-text="content"></p>
        <button @click="action" class="mt-2 px-4 py-2 bg-blue-500 text-white rounded">
            <span x-text="buttonLabel"></span>
        </button>
    </div>
</template>

<div x-data="{ title: 'Card Title', content: 'This is card content.', buttonLabel: 'Click', action: () => alert('Card clicked!') }">
    <div x-init="$el.innerHTML = document.getElementById('card-template').innerHTML"></div>
</div>

<div x-data="{ cards: [
    { title: 'Card 1', content: 'Content for card 1', buttonLabel: 'Click Me', action: () => alert('Card 1 clicked!') },
    { title: 'Card 2', content: 'Content for card 2', buttonLabel: 'Click Me', action: () => alert('Card 2 clicked!') }
] }">
    <template x-for="card in cards" :key="card.title">
        <div class="p-4 border rounded shadow">
            <h2 class="text-lg font-bold" x-text="card.title"></h2>
            <p class="text-gray-600" x-text="card.content"></p>
            <button @click="card.action" class="mt-2 px-4 py-2 bg-blue-500 text-white rounded">
                <span x-text="card.buttonLabel"></span>
            </button>
        </div>
    </template>
</div>

<template id="slot-component">
    <div class="p-4 border rounded shadow">
        <slot></slot>
    </div>
</template>

<div>
    <div x-data x-init="$el.innerHTML = document.getElementById('slot-component').innerHTML">
        <h2 class="text-lg font-bold">Custom Content</h2>
        <p>This content is passed to the slot.</p>
    </div>
</div>

<div x-data="{ createButton(label, action) { return { label, action }; } }">
    <template x-data="createButton('Submit', () => alert('Submitted!'))">
        <button @click="action" class="px-4 py-2 bg-green-500 text-white rounded">
            <span x-text="label"></span>
        </button>
    </template>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('sharedState', {
            count: 0
        });
    });
</script>

<div>
    <div x-data>
        <button @click="$store.sharedState.count++">Increment</button>
    </div>
    <div x-data>
        <p>Shared Count: <span x-text="$store.sharedState.count"></span></p>
    </div>
</div>

<div x-data="{ createCard(title, content, buttonLabel, action) { 
        return { title, content, buttonLabel, action }; 
    }, cards: [] }">
    <button @click="cards.push(createCard('Dynamic Title', 'Dynamic Content', 'Click Me', () => alert('Dynamic Clicked!')))">
        Add Card
    </button>
    <template x-for="card in cards" :key="card.title">
        <div class="p-4 border rounded shadow">
            <h2 class="text-lg font-bold" x-text="card.title"></h2>
            <p class="text-gray-600" x-text="card.content"></p>
            <button @click="card.action" class="mt-2 px-4 py-2 bg-blue-500 text-white rounded">
                <span x-text="card.buttonLabel"></span>
            </button>
        </div>
    </template>
</div>