/**
 * 매매 시그널 알림 상세 본문 — 종목·시간·매수/매도·금액 등
 */
import React from 'react';
import {
  buildSignalDetailRows,
  formatSignalPrice,
  getSignalHeadline,
  getSignalTypeKo,
  type TradeSignalDisplaySource,
} from '../utils/tradeSignalDisplay';
import { useTradeAlertTimeFormat } from '../utils/tradeAlertTimeFormat';

interface Props {
  item: TradeSignalDisplaySource;
  /** compact: 스택 팝업, full: 목록/모달 요약 */
  variant?: 'compact' | 'full';
  showHeadline?: boolean;
}

export const TradeSignalDetailBody: React.FC<Props> = ({
  item,
  variant = 'compact',
  showHeadline = true,
}) => {
  useTradeAlertTimeFormat();
  const isBuy = item.signalType === 'BUY';
  const rows = buildSignalDetailRows(item);

  return (
    <div className={`tsd-body tsd-body--${variant}`}>
      {showHeadline && (
        <div className="tsd-headline">
          <span className={`tsd-direction ${isBuy ? 'tsd-direction--buy' : 'tsd-direction--sell'}`}>
            {isBuy ? '↑' : '↓'} {getSignalTypeKo(item.signalType)}
          </span>
          <span className="tsd-headline-price">{formatSignalPrice(item.price)}</span>
        </div>
      )}
      <p className="tsd-summary">{getSignalHeadline(item)}</p>
      <dl className="tsd-detail-grid">
        {rows.map(row => (
          <React.Fragment key={row.label}>
            <dt className="tsd-dt">{row.label}</dt>
            <dd className={`tsd-dd${row.highlight ? ' tsd-dd--highlight' : ''}`}>{row.value}</dd>
          </React.Fragment>
        ))}
      </dl>
    </div>
  );
};

export default TradeSignalDetailBody;
