// Button component with gradient styling

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

/// Button component with gradient background
#[component]
pub fn Button(
    #[prop(default = "button")] r#type: &'static str,
    #[prop(optional)] on_click: Option<Box<dyn Fn(MouseEvent) + 'static>>,
    #[prop(default = false)] disabled: bool,
    #[prop(default = "")] class: &'static str,
    children: Children,
) -> impl IntoView {
    let default_class = "px-4 py-2 rounded-lg bg-gradient-to-r from-cyan-500/90 to-cyan-600/90 \
                         text-white font-medium transition-all duration-300 \
                         hover:from-cyan-400/90 hover:to-cyan-500/90 hover:shadow-lg \
                         hover:shadow-cyan-500/50 disabled:opacity-50 disabled:cursor-not-allowed";

    let final_class = format!("{} {}", default_class, class);

    view! {
        <button
            type=r#type
            class=final_class
            disabled=disabled
            on:click=move |ev| {
                if let Some(ref handler) = on_click {
                    handler(ev);
                }
            }
        >
            {children()}
        </button>
    }
}
