use leptos::prelude::*;

#[component]
pub fn Counter() -> impl IntoView {
    eprintln!("Counter rendering");
    let (count, set_count) = signal(0);
    let on_click_plus = move |_| set_count.update(|c| *c += 1);
    let on_click_minus = move |_| set_count.update(|c| *c -= 1);

    view! {
       <div class="flex justify-center items-center gap-x-6">
            <button on:click=on_click_plus class="bg-teal-500 text-white px-4 py-2 rounded-xl">
                "Increment: " {move || count.get()}
            </button>
            <button on:click=on_click_minus class="bg-pink-500 text-white px-4 py-2 rounded-xl">
                "Decrement: " {move || count.get()}
            </button>
       </div>
       <div class="mt-10">
            <p class="text-center italic dark:text-white">
                "Double: " {move || count.get() * 2}
            </p>
       </div>
    }
}
