use yew::prelude::*;

#[derive(Properties, PartialEq)]
pub struct AttemptRowProps {
    pub answer: AttrValue,
    pub text: AttrValue,
}

#[function_component]
pub fn AttemptRow(props: &AttemptRowProps) -> Html {
    let AttemptRowProps { answer, text } = props;

    html! {
        { for answer.chars().zip(text.chars()).map(|(ans, att)| html! { <p class={
            if ans == att { "correct" } else if answer.contains(att) { "almost" } else { "missed" }
        } >{ att }</p> }) }
    }
}