use yew::{Html, Context, Component, html};

pub enum Msg {
    AddOne,
}

pub struct CounterComponent {
    count: i64,
}

impl Component for CounterComponent {
    type Message = Msg;
    type Properties = ();

    fn create(_ctx: &Context<Self>) -> Self {
        Self { count: 0 }
    }

    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool{
        match msg {
            Msg::AddOne => {
                self.count += 1;
                true
            }
        }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        let link = ctx.link();
        html! {
        <div class="items-center flex-col flex gap-40 pb-10 bg-fixed">
            <h1 class="underline text-white text-xxl mt-10"> {self.count} </h1>
            <button class="fixed bottom-20 outline-pink outline rounded-xl w-3/4 text-white" onclick={link.callback(|_| Msg::AddOne)}> { "+1" } </button>
        </div>
        }
    }

}