"use client";

// 종목 페이지 상단 가격 헤더.
// 표시: 종목명 / (코드·시장) / 현재가 / 전일대비 (절대값 + 퍼센트).
// 한국 거래소 관행대로 상승=빨강, 하락=파랑.

type Props = {
  name: string;
  code: string;
  market: string;
  current: number | null;
  prev: number | null;
  asOf?: string | null;
};

export function PriceHero({ name, code, market, current, prev, asOf }: Props) {
  const change = current != null && prev != null ? current - prev : null;
  const pct = change != null && prev ? (change / prev) * 100 : null;
  const tone =
    change == null || change === 0
      ? "text-zinc-400"
      : change > 0
        ? "text-rose-400"
        : "text-sky-400";
  const arrow = change == null || change === 0 ? "—" : change > 0 ? "▲" : "▼";

  return (
    <div className="mb-5">
      <div className="text-xs text-zinc-500">
        {code} · {market}
      </div>
      <h1 className="mt-0.5 text-2xl font-bold tracking-tight text-zinc-50">
        {name}
      </h1>
      <div className="mt-3 flex items-baseline gap-3">
        <span className="text-4xl font-semibold tabular-nums text-zinc-50">
          {current != null ? current.toLocaleString() : "-"}
        </span>
        {change != null && pct != null && (
          <span className={`text-base font-medium tabular-nums ${tone}`}>
            {arrow} {Math.abs(change).toLocaleString()}{" "}
            ({pct >= 0 ? "+" : ""}
            {pct.toFixed(2)}%)
          </span>
        )}
      </div>
      {asOf && (
        <div className="mt-1 text-xs text-zinc-500">기준 {asOf}</div>
      )}
    </div>
  );
}