import React from 'react';

const PerformanceBanner = ({ perf }) => {
    if (!perf || perf.total_checked === 0) return null;
    const imp = perf.vs_random?.improvement_pct ?? 0;
    const prizeHits = (perf.by_rank?.rank_3 ?? 0) + (perf.by_rank?.rank_4 ?? 0) + (perf.by_rank?.rank_5 ?? 0);
    return (
        <div className="lotto-perf-banner">
            <span className="lotto-perf-banner__label">신뢰도 지표</span>
            <div className="lotto-perf-banner__items">
                <div className="lotto-perf-banner__item">
                    <span className="lotto-perf-banner__val">{perf.total_checked}</span>
                    <span className="lotto-perf-banner__lbl">검증 회차</span>
                </div>
                <div className="lotto-perf-banner__divider" />
                <div className="lotto-perf-banner__item">
                    <span className="lotto-perf-banner__val">{(perf.avg_correct ?? 0).toFixed(1)}</span>
                    <span className="lotto-perf-banner__lbl">평균 일치수</span>
                </div>
                <div className="lotto-perf-banner__divider" />
                <div className="lotto-perf-banner__item">
                    <span className={`lotto-perf-banner__val ${imp > 0 ? 'is-pos' : ''}`}>
                        {imp > 0 ? '+' : ''}{imp.toFixed(1)}%
                    </span>
                    <span className="lotto-perf-banner__lbl">무작위 대비</span>
                </div>
                <div className="lotto-perf-banner__divider" />
                <div className="lotto-perf-banner__item">
                    <span className="lotto-perf-banner__val">
                        {((perf.rate_3plus ?? 0) * 100).toFixed(1)}%
                    </span>
                    <span className="lotto-perf-banner__lbl">3개↑ 일치율</span>
                </div>
                {prizeHits > 0 && (
                    <>
                        <div className="lotto-perf-banner__divider" />
                        <div className="lotto-perf-banner__item">
                            <span className="lotto-perf-banner__val is-prize">{prizeHits}건</span>
                            <span className="lotto-perf-banner__lbl">3~5등 당첨</span>
                        </div>
                    </>
                )}
            </div>
        </div>
    );
};

export default PerformanceBanner;
