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-center text-lg sm:text-xl text-alice-werefox-blue-dark dark:text-alice-werefox-blue-light",
                    "{question}"
                }
            }
            div { class: " 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 transition",
                a { href: "https://bark.lgbt/@alicew", target: "_blank",
                    div { class: "p-2 flex",
                        div { class: "order-1 flex-shrink-0 relative inline sm:w-32 w-16 min-h-full items-center justify-center align-middle pt-4 pb-4 pl-4",
                            img {
                                alt: "{image_props.alt}",
                                src: "{image_props.src}"
                            }
                        }
                        div { class: "order-2 flex overflow-auto items-center justify-center animate-wiggle p-4 sm:text-lg text-xs text-center sm:min-h-full h-full",
                            "{answer}"
                            br {}
                            "{\"- @alice\"}"
                        }
                    }
                }
            }
        }
    }
}
