const ROLE_COLOR = { '안정': 'stable', '균형': 'balance', '공격': 'aggro' };

export default function PickCard({ pick, index, total }) {
    const role = pick.risk_tag;
    return (
        <div className="lc-set">
            <div className="lc-set__head">
                <span className={`lc-set__role lc-set__role--${ROLE_COLOR[role]}`}>● {role}</span>
                <span className="lc-set__idx">Set {index + 1} / {total}</span>
            </div>
            <div className="lc-balls">
                {pick.numbers.map(n => (
                    <span key={n} className={`ball ball--${Math.ceil(n / 10)}`}>{n}</span>
                ))}
            </div>
            <p className="lc-set__reason">{pick.reason}</p>
        </div>
    );
}