import React from 'react';
import { formatNumber, formatPercent, profitColorClass } from '../../stockUtils';
import HoldingRow from './HoldingRow';

const BrokerSection = ({ broker, items, pf, handleSell }) => {
    const bSummary = pf.getBrokerSummary(items);
    const color = pf.brokerColors[broker];
    return (
        <section
            key={broker}
            className="stock-panel stock-panel--wide pf-broker-section"
            style={{ borderColor: color?.border, background: color?.bg }}
        >
            <div className="stock-panel__head">
                <div>
                    <p className="stock-panel__eyebrow" style={{ color: color?.border }}>
                        {broker}
                    </p>
                    <h3>{broker} 보유 현황</h3>
                    <p className="stock-panel__sub">
                        {items.length}종목 · 총 매입{' '}
                        {formatNumber(bSummary.totalBuy)} · 평가{' '}
                        {formatNumber(bSummary.totalEval)} · 손익{' '}
                        <span className={`stock-profit ${profitColorClass(bSummary.totalProfit)}`}>
                            {formatNumber(bSummary.totalProfit)} (
                            {formatPercent(bSummary.totalProfitRate)})
                        </span>
                        {(() => {
                            const bc = pf.cashList.find((c) => c.broker === broker);
                            return bc ? (
                                <span className="pf-cash-badge">
                                    예수금 {formatNumber(bc.cash)}원
                                </span>
                            ) : null;
                        })()}
                    </p>
                </div>
            </div>
            <div className="stock-holdings">
                {items.map((item) => (
                    <HoldingRow key={item.id} item={item} pf={pf} handleSell={handleSell} />
                ))}
            </div>
        </section>
    );
};

export default BrokerSection;