use crate::models::McpTool;
use dioxus::prelude::*;

/// Renders an MCP tool card with name, description, status indicator, and toggle.
///
/// # Arguments
///
/// * `tool` - The MCP tool data to render
/// * `on_toggle` - Callback fired when the enable/disable toggle is clicked
#[component]
pub fn ToolCard(tool: McpTool, on_toggle: EventHandler<String>) -> Element {
    let status_class = format!("tool-status tool-status--{}", tool.status.css_class());
    let toggle_class = if tool.enabled {
        "tool-toggle tool-toggle--on"
    } else {
        "tool-toggle tool-toggle--off"
    };

    rsx! {
        div { class: "tool-card",
            div { class: "tool-card-header",
                div { class: "tool-card-icon", "\u{2699}" }
                span { class: "{status_class}", "" }
            }
            h3 { class: "tool-card-name", "{tool.name}" }
            p { class: "tool-card-desc", "{tool.description}" }
            div { class: "tool-card-footer",
                span { class: "tool-card-category", "{tool.category.label()}" }
                button {
                    class: "{toggle_class}",
                    onclick: {
                        let id = tool.id.clone();
                        move |_| on_toggle.call(id.clone())
                    },
                    if tool.enabled {
                        "ON"
                    } else {
                        "OFF"
                    }
                }
            }
        }
    }
}