use leptos::prelude::*;

#[component]
pub fn StatCardClient(
    label: String,
    value: String,
    change: Option<String>,
    trend_positive: bool,
    icon: Option<Children>,
    class: &'static str,
) -> impl IntoView {
    let trend_color = if trend_positive {
        "text-green-400"
    } else {
        "text-red-400"
    };

    view! {
        <div class={format!("ds-card p-6 {}", class)}>
            <div class="flex items-start justify-between">
                <div class="flex-1">
                    <p class="text-sm text-white/60 mb-1">{label}</p>
                    <p class="text-3xl font-bold text-white">{value}</p>
                    {change.map(|ch| {
                        view! {
                            <p class={format!("text-sm mt-2 {}", trend_color)}>
                                {ch}
                            </p>
                        }
                    })}
                </div>
                {icon.map(|icon_fn| {
                    view! {
                        <div class="ml-4">
                            {icon_fn()}
                        </div>
                    }
                })}
            </div>
        </div>
    }
}