auto-trade/features/trade/components/details/StockPriceBadge.tsx

import { TrendingDown, TrendingUp } from "lucide-react";
import { cn } from "@/lib/utils";

const PRICE_FORMATTER = new Intl.NumberFormat("ko-KR");
function formatPrice(value: number) {
  return `${PRICE_FORMATTER.format(value)}원`;
}

interface StockPriceBadgeProps {
  currentPrice: number;
  change: number;
  changeRate: number;
}

export function StockPriceBadge({
  currentPrice,
  change,
  changeRate,
}: StockPriceBadgeProps) {
  const isPositive = change >= 0;
  const ChangeIcon = isPositive ? TrendingUp : TrendingDown;
  const changeColor = isPositive ? "text-red-500" : "text-brand-600";
  const changeSign = isPositive ? "+" : "";

  return (
    <div className="flex items-baseline gap-2">
      <span className={cn("text-3xl font-bold", changeColor)}>
        {formatPrice(currentPrice)}
      </span>
      <div
        className={cn(
          "flex items-center gap-1 text-sm font-medium",
          changeColor,
        )}
      >
        <ChangeIcon className="h-4 w-4" />
        <span>
          {changeSign}
          {PRICE_FORMATTER.format(change)}원
        </span>
        <span>
          ({changeSign}
          {changeRate.toFixed(2)}%)
        </span>
      </div>
    </div>
  );
}