// 상세 페이지 본문 카드의 표준 헤더 — title 좌, 옵셔널 우측 슬롯 우.
// 작은 wrapper 지만 본문 카드 9개(Metrics / IntradayReturns / PeriodReturns /
// CompositeScoreCard / PeerComparePanel / TradingValuePanel / DisclosuresPanel /
// NewsList / InvestorCumulative) 가 같은 mb-3 flex items-baseline justify-between
// 패턴을 character-by-character 로 중복 정의하고 있어, ReturnBucket 분리와 같은
// 이유로 단일 source of truth 로 묶는다 — 한쪽만 마진/폰트 바꾸면 본문 카드들
// 사이에 톤 점프가 생기는 future drift 리스크 제거.
//
// 우측 슬롯은 두 형태:
//   - subtitle: 단순 보조 텍스트 (text-[11px] text-zinc-500 자동 적용). 8개 카드 사용.
//   - right   : 임의 ReactNode (버튼 그룹 등 인터랙티브). InvestorCumulative 가 사용.
// 둘 중 하나만 지정. 동시 지정 시 right 우선 (호출자 의도 명확화는 호출 시점에서).
//
// 제외 카드 — PredictionPanel: title 자체가 제목 + 설명 2줄 stack 이고 우측 큰
// button 이라 flex 정렬이 items-center 필요. 별도 패턴이 한 곳뿐이라 wrapper 의
// API 를 확장하기보다는 자체 헤더 유지하는 게 surgical.

import type { ReactNode } from "react";

type Props = {
  title: ReactNode;
  // 우측 보조 텍스트. 없으면 헤더에 title 만 남음 (이 경우에도 mb-3 flex 컨테이너
  // 는 유지 — MetricsPanel 같은 단일-제목 카드도 같은 라인 높이로 정렬).
  subtitle?: ReactNode;
  // 우측 임의 노드 (버튼 그룹 등). 제공되면 subtitle 대신 렌더.
  right?: ReactNode;
};

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