export default function Tag({tag, name}:{tag: number|undefined, name: string}){
    let classColor = "report-tag-count-good";
    if (tag){
        if (tag <= 10){
            classColor = "report-tag-count-good";
        } else if (tag > 10 && tag <= 25) {
            classColor = "report-tag-count-ok";
        } else if (tag > 25 && tag <= 50) {
            classColor = "report-tag-count-bad";
        } else {
            classColor = "report-tag-count-very-bad";
        }
    }

    return (
        <>
            <div className="report-tag">
                <span className={classColor}>{tag} </span>
                <span>{name}</span>
            </div>
        </>
    )
}