//! The `Icon` component: renders a glyph from the central [`crate::icons`]
//! registry (Material Symbols via Iconify) as inline SVG.

use leptos::prelude::*;

use crate::icons::IconName;

/// Folder-shaped glyphs get the accent color; everything else stays muted.
fn icon_class(name: IconName) -> &'static str {
    if name.is_folder() {
        "ic-folder"
    } else {
        "ic-muted"
    }
}

#[component]
pub fn Icon(name: IconName, #[prop(optional)] class: Option<String>) -> impl IntoView {
    let node = NodeRef::<leptos::svg::Svg>::new();
    let body = name.body().to_string();
    node.on_load(move |el: web_sys::SvgElement| {
        // The registry bodies are raw SVG markup (`<path …/>`), so they are
        // injected as-is. The strings are static and fetched from the
        // Iconify API — never user input.
        el.set_inner_html(&body);
    });
    let mut cls = String::from("icon ");
    cls.push_str(icon_class(name));
    if let Some(extra) = class {
        cls.push(' ');
        cls.push_str(&extra);
    }
    view! {
        <svg
            node_ref=node
            class=cls
            viewBox="0 0 24 24"
            fill="currentColor"
            aria-hidden="true"
        />
    }
}