use leptos::prelude::*;
use leptos_router::components::A;

/// A secondary style link button with muted colors and hover effects
/// Used for navigation links like "Login with Telegram", "Back to login", etc.
#[component]
pub fn SecondaryLinkButton(
    /// The URL to navigate to
    href: String,
    /// The button text content
    children: Children,
    /// Optional ID for the button element
    #[prop(optional)] id: Option<&'static str>,
    /// Optional additional CSS classes
    #[prop(optional)] class: Option<String>,
) -> impl IntoView {
    let base_classes = "inline-block bg-none border-none text-[var(--text-muted)] text-sm cursor-pointer py-[10px] px-4 rounded-lg transition-all duration-300 hover:text-[var(--text-primary)] hover:bg-[var(--input-bg)] no-underline";
    
    let final_classes = if let Some(additional_class) = class {
        format!("{} {}", base_classes, additional_class)
    } else {
        base_classes.to_string()
    };

    view! {
        <A 
            href=href
            attr:id=id
            attr:class=final_classes
        >
            {children()}
        </A>
    }
}

/// A primary style submit button with accent colors and hover effects
/// Used for form submissions like "Sign in", "Register", "Submit", etc.
#[component]
pub fn PrimaryButton(
    /// The button text content
    children: Children,
    /// Optional ID for the button element
    #[prop(optional)] id: Option<&'static str>,
    /// Optional button type (defaults to "button")
    #[prop(optional)] button_type: Option<String>,
    /// Optional disabled state (reactive signal)
    #[prop(optional)] disabled: Option<Signal<bool>>,
    /// Optional additional CSS classes
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] no_margin: Option<bool>,
) -> impl IntoView {
    let base_classes = "bg-[var(--btn-secondary-bg)] text-[var(--text-alternative)] border-none rounded-xl py-4 px-5 text-base font-semibold cursor-pointer transition-all duration-300 hover:bg-[var(--btn-secondary-bg-hover)] hover:-translate-y-px hover:shadow-[0_4px_12px_var(--shadow-darker)] disabled:opacity-50 disabled:cursor-not-allowed";
    let margin_classes = if no_margin.unwrap_or(false) {
        "mt-0"
    } else {
        "mt-[10px]"
    };
    let final_classes = format!("{} {}", base_classes, margin_classes);
    
    let final_classes = if let Some(additional_class) = class {
        format!("{} {}", base_classes, additional_class)
    } else {
        base_classes.to_string()
    };

    let btn_type = button_type.unwrap_or_else(|| "button".to_string());

    view! {
        <button 
            type=btn_type
            id=id
            class=final_classes
            disabled=move || disabled.map(|d| d.get()).unwrap_or(false)
        >
            {children()}
        </button>
    }
}
