use crate::utils::prop_structs::*;
use dioxus::prelude::*;

#[component]
pub fn ProjectFoldable(
    project_title: String,
    project_description: String,
    image_props: ImageProps,
    children: Element,
) -> Element {
    rsx! {
        details { class: "p-4 space-y-4 rounded-sm ring-2 text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue hover:animate-yip transition",
            summary { class: "flex flex-col space-y-2 justify-center text-center p-2",
                div { class: "text-lg text-center",
                    span { class: "animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top",
                        img { src: "{image_props.src}", alt: "{image_props.alt}" }
                    }
                    " {project_title}"
                }
                div { "{project_description}" }
            }
            {children}
        }
    }
}
