// 상세 페이지 본문 카드의 표준 헤더 — title 좌, 옵셔널 subtitle 우.
// 작은 wrapper 지만 본문 카드 8개(Metrics / IntradayReturns / PeriodReturns /
// CompositeScoreCard / PeerComparePanel / TradingValuePanel / DisclosuresPanel /
// NewsList) 가 같은 mb-3 flex items-baseline justify-between 패턴을
// character-by-character 로 중복 정의하고 있어, ReturnBucket 분리와 같은 이유로
// 단일 source of truth 로 묶는다 — 한쪽만 마진/폰트 바꾸면 본문 카드들 사이에
// 톤 점프가 생기는 future drift 리스크 제거.
//
// 제외 카드 — 우측이 단순 subtitle 텍스트가 아닌 인터랙티브 컨트롤이라 이
// wrapper 대상이 아님. 자체 헤더 유지:
//   - PredictionPanel       : 우측이 '예측 실행' button.
//   - InvestorCumulative    : 우측이 window 선택 button 그룹(aria-pressed).

import type { ReactNode } from "react";

type Props = {
  title: ReactNode;
  // 우측 보조 정보. 없으면 헤더에 title 만 남음 (이 경우에도 mb-3 flex 컨테이너
  // 는 유지 — MetricsPanel 같은 단일-제목 카드도 같은 라인 높이로 정렬).
  subtitle?: ReactNode;
};

export function CardHeader({ title, subtitle }: Props) {
  return (
    <div className="mb-3 flex items-baseline justify-between">
      <div className="text-sm font-medium text-zinc-200">{title}</div>
      {subtitle != null && (
        <div className="text-[11px] text-zinc-500">{subtitle}</div>
      )}
    </div>
  );
}