//! UI Components for jpl-website
//! 
//! Reusable UI components built with Leptos and UnoCSS.

use leptos::*;

mod navigation;
mod footer;

pub use navigation::*;
pub use footer::*;

/// Common button component with consistent styling
#[component]
pub fn Button(
    /// Button text
    children: Children,
    /// Click handler
    #[prop(optional)] on_click: Option<Box<dyn Fn() + 'static>>,
    /// Button variant
    #[prop(default = "primary")] variant: &'static str,
    /// Additional CSS classes
    #[prop(default = "")] class: &'static str,
    /// Button type
    #[prop(default = "button")] r#type: &'static str,
    /// Disabled state
    #[prop(default = false)] disabled: bool,
) -> impl IntoView {
    let button_class = format!(
        "btn {} {}",
        match variant {
            "primary" => "btn-primary",
            "secondary" => "btn-secondary", 
            "ghost" => "btn-ghost",
            _ => "btn-primary",
        },
        class
    );
    
    let disabled_class = if disabled { " opacity-50 cursor-not-allowed" } else { "" };
    let final_class = format!("{}{}", button_class, disabled_class);
    
    view! {
        <button
            type=r#type
            class=final_class
            disabled=disabled
            on:click=move |_| {
                if let Some(handler) = &on_click {
                    if !disabled {
                        handler();
                    }
                }
            }
        >
            {children()}
        </button>
    }
}

/// Loading spinner component
#[component]
pub fn LoadingSpinner(
    #[prop(default = "w-4 h-4")] size: &'static str,
    #[prop(default = "")] class: &'static str,
) -> impl IntoView {
    view! {
        <div class={format!("animate-spin rounded-full border-2 border-gray-300 border-t-primary-600 {size} {class}")}>
        </div>
    }
}

/// Card container component
#[component]
pub fn Card(
    children: Children,
    #[prop(default = "")] class: &'static str,
) -> impl IntoView {
    view! {
        <div class={format!("card {class}")}>
            {children()}
        </div>
    }
}