import { createSignal } from "solid-js";

export function SolidApp(props) {
    // Local state for optimistic updates or other UI-only logic
    const [isUpdating, setIsUpdating] = createSignal(false);

    const increment = () => {
        setIsUpdating(true);
        props.push("increment", {});
    };

    const decrement = () => {
        setIsUpdating(true);
        props.push("decrement", {});
    };

    // Reset updating flag when state changes from server
    // (In a real app, you might use a more sophisticated approach)

    return (
        <div class="p-6 border-2 border-blue-500 rounded-lg bg-white shadow-md">
            <h2 class="text-xl font-semibold text-blue-700 mb-4">Solid.js Component</h2>

            <div class="flex items-center space-x-4 mb-6">
                <span class="text-4xl font-bold">{props.state.count}</span>
                <div class="flex flex-col space-y-2">
                    <button
                        onClick={increment}
                        class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors"
                    >
                        Increment
                    </button>
                    <button
                        onClick={decrement}
                        class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition-colors"
                    >
                        Decrement
                    </button>
                </div>
            </div>

            <p class="text-sm text-gray-500 italic">
                This UI is rendered by Solid.js. Changes are synced back to Elixir via push_event.
            </p>
        </div>
    );
}