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

#[component]
pub fn ProjectCard(
    project_title: String,
    project_description: Option<String>,
    project_link: String,
    image_props: Option<ImageProps>,
) -> Element {
    rsx! {
        div {
            a { href: "{project_link}",
                target: "_blank",
                ul { class: "p-4 space-y-2 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",
                    div { class: "text-lg text-center",
                        match image_props {
                            Some(image) => rsx! {
                        span { class: "animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top",
                            img { src: "{image.src}", alt: "{image.alt}" }
                        }},
                            _ => rsx!{},
                        },
                        " {project_title}"
                    }
                    match project_description {
                        Some(description) => rsx! {
                    div { class: "text-md text-center", "{description}" }
                        },
                        _ => rsx!{},
                    }
                }
            }
        }
    }
}
