use crate::components::suit_css_class;
use protocol::card;
use yew::prelude::*;

#[function_component(Card)]
pub fn ccard(props: &CardProps) -> Html {
    let card::Card(suit, rank) = props.card;

    let onclick = {
        let card = props.card.clone();
        let onclick = props.onclick.clone();
        Callback::from(move |_| onclick.emit(card))
    };

    html! {
        <div class="card" {onclick}>
            <div class={ suit_css_class(suit) }>
                { rank }
            </div>
        </div>
    }
}

#[derive(PartialEq, Properties, Clone)]
pub struct CardProps {
    pub card: card::Card,
    #[prop_or_default]
    pub onclick: Callback<card::Card>,
}