import { estimateCost, fmtUsd, fmtTokens } from './pricing';

export default function BriefingHeader({ briefing, regenerating, onRegenerate }) {
    const cost = estimateCost(briefing);
    const genDate = new Date(briefing.generated_at).toLocaleString('ko-KR');
    return (
        <div className="briefing-header">
            <div className="briefing-header-row">
                <h2>🗓 #{briefing.draw_no}회 브리핑</h2>
                <button onClick={onRegenerate} disabled={regenerating}>
                    {regenerating ? '⏳ 생성 중...' : '🔄 다시 생성'}
                </button>
            </div>
            <div className="briefing-meta">
                <span>{genDate}</span>
                <span className="briefing-confidence">
                    신뢰도 <strong>{briefing.confidence}</strong>/100
                </span>
                <span className="briefing-tokens">
                    {fmtTokens(briefing.tokens_input)} in · {fmtTokens(briefing.tokens_output)} out · {fmtUsd(cost)}
                </span>
            </div>
            <div className="briefing-confidence-bar">
                <div style={{ width: `${briefing.confidence}%` }} />
            </div>
        </div>
    );
}