use dioxus::prelude::*;

use crate::i18n::{t, tw, Locale};
use crate::models::PricingPlan;

/// Renders a pricing plan card with features list and call-to-action button.
///
/// # Arguments
///
/// * `plan` - The pricing plan data to render
/// * `on_select` - Callback fired when the CTA button is clicked
#[component]
pub fn PricingCard(plan: PricingPlan, on_select: EventHandler<String>) -> Element {
    let locale = use_context::<Signal<Locale>>();
    let l = *locale.read();

    let card_class = if plan.highlighted {
        "pricing-card pricing-card--highlighted"
    } else {
        "pricing-card"
    };

    let seats_label = match plan.max_seats {
        Some(n) => tw(l, "common.up_to_seats", &[("n", &n.to_string())]),
        None => t(l, "common.unlimited_seats"),
    };

    rsx! {
        div { class: "{card_class}",
            h3 { class: "pricing-card-name", "{plan.name}" }
            div { class: "pricing-card-price",
                span { class: "pricing-card-amount", "{plan.price_eur}" }
                span { class: "pricing-card-period", " {t(l, \"common.eur_per_month\")}" }
            }
            p { class: "pricing-card-seats", "{seats_label}" }
            ul { class: "pricing-card-features",
                for feature in &plan.features {
                    li { "{feature}" }
                }
            }
            button {
                class: "pricing-card-cta",
                onclick: {
                    let id = plan.id.clone();
                    move |_| on_select.call(id.clone())
                },
                "{t(l, \"common.get_started\")}"
            }
        }
    }
}