use leptos::ev;
use leptos::prelude::*;

use crate::theme::{Size, Variant};

#[component]
pub fn ButtonClient(
    children: Children,
    variant: Variant,
    size: Size,
    button_type: &'static str,
    loading: bool,
    disabled: bool,
    on_click: Callback<ev::MouseEvent>,
    class: &'static str,
) -> impl IntoView {
    let base_classes = "ds-btn focus:outline-none focus:ring-2 focus:ring-cyan-500/50";
    let combined_classes = format!(
        "{} {} {} {}",
        base_classes,
        variant.classes(),
        size.classes(),
        class
    );

    let is_disabled = loading || disabled;

    view! {
        <button
            type=button_type
            class=combined_classes
            disabled=is_disabled
            on:click=move |ev| {
                on_click.run(ev);
            }
        >
            {if loading {
                view! {
                    <span class="flex items-center gap-2">
                        <span class="animate-spin">"↻"</span>
                        {children()}
                    </span>
                }.into_any()
            } else {
                children().into_any()
            }}
        </button>
    }
}
