import React, {FunctionComponent} from "react";

interface Props {
    cardString: string;
    handleClick?: (cardString: string) => void;
    isHidden?: boolean;
    isClickable?: boolean;
}

const Card: FunctionComponent<Props> = ({cardString, handleClick, isHidden, isClickable}) => {
    const cardType = cardString.split(' ')[0].toLowerCase();
    const cardValue = cardString.split(' ')[1].toLowerCase();

    const cardSource = isHidden ?
        require(`../../assets/cards/back.png`) :
        require(`../../assets/cards/${cardType}_${cardValue}.png`);
    const cardName = isHidden ? 'back' : `${cardType} ${cardValue}`;

    const handleCardClick = () => {
        if (handleClick) {
            handleClick(cardString);
        }
    }

    return (
        <div className={`card ${isClickable && 'card-clickable'}`}>
            <img className="card__texture" src={cardSource} alt={cardName} onClick={handleCardClick}/>
        </div>
    )
}

export default Card;