use leptos::prelude::*;
use crate::components::prelude::*;


#[component]
fn TrafficBlock(
    id: &'static str,
    title: String,
    value: String,
    description: String,
    badge: Option<String>,
) -> impl IntoView {
    view! {
        <div class="bg-gray-800 rounded-2xl p-4 shadow-xl" id=id>
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-base font-semibold text-white" id=format!("{}-title", id)>
                    {title}
                </h3>
                {badge.map(|badge_text| view! {
                    <span class="bg-gradient-to-r from-orange-400 to-red-500 text-white text-xs font-bold px-2 py-1 rounded-lg" id=format!("{}-badge", id)>
                        {badge_text}
                    </span>
                })}
            </div>
            <p class="text-xl font-bold text-white mb-1" id=format!("{}-value", id)>
                {value}
            </p>
            <p class="text-gray-400 text-xs" id=format!("{}-desc", id)>
                {description}
            </p>
        </div>
    }
}

#[component]
pub fn QuickStats() -> impl IntoView {
    view! {
        <div class="bg-gray-800 rounded-2xl p-4 shadow-xl" id="info-block">
            <h3 class="text-lg font-semibold text-white mb-3" id="info-title">
                {t8s!("Quick Stats")}
            </h3>
            <div class="grid grid-cols-2 gap-4" id="quick-stats">
                <QuickStat
                    id="stat-1"
                    label=t8s!("Requests Today").to_string()
                    value="847".to_string()
                    value_class="text-base font-bold text-white"
                />
                <QuickStat
                    id="stat-2"
                    label=t8s!("Success Rate").to_string()
                    value="99.2%".to_string()
                    value_class="text-base font-bold text-green-400"
                />
            </div>
        </div>
    }
}

#[component]
fn QuickStat(
    id: &'static str,
    label: String,
    value: String,
    value_class: &'static str,
) -> impl IntoView {
    view! {
        <div id=id>
            <p class="text-gray-400 text-xs" id=format!("{}-label", id)>
                {label}
            </p>
            <p class=value_class id=format!("{}-value", id)>
                {value}
            </p>
        </div>
    }
}
