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

#[component]
pub fn FaqCard(question: String, answer: String, image_props: ImageProps) -> Element {
    rsx! {
        div { class: "space-y-2",
            div { class: "ring-2 ring-alice-werefox-blue-dark dark:ring-alice-werefox-blue",
                p { class: "p-8 text-lg text-center sm:text-xl text-alice-werefox-blue-dark dark:text-alice-werefox-blue-light",
                    "{question}"
                }
            }
            div { class: "transition  ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:animate-yip",
                a { href: "https://yiff.life/@werefox", target: "_blank",
                    div { class: "flex p-2",
                        div { class: "relative items-center justify-center flex-shrink-0 order-1 inline w-16 min-h-full pt-4 pb-4 pl-4 align-middle sm:w-32",
                            img {
                                alt: "{image_props.alt}",
                                src: "{image_props.src}"
                            }
                        }
                        div { class: "flex items-center justify-center order-2 h-full p-4 overflow-auto text-xs text-center animate-wiggle sm:text-lg sm:min-h-full",
                            "{answer}"
                            br {}
                            "{\"- @alice\"}"
                        }
                    }
                }
            }
        }
    }
}
