auto-trade/features/trade/components/header/StockHeader.tsx

// import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { DashboardStockItem } from "@/features/trade/types/trade.types";
import { cn } from "@/lib/utils";

interface StockHeaderProps {
  stock: DashboardStockItem;
  price: string;
  change: string;
  changeRate: string;
  high?: string;
  low?: string;
  volume?: string;
}

export function StockHeader({
  stock,
  price,
  change,
  changeRate,
  high,
  low,
  volume,
}: StockHeaderProps) {
  const isRise = changeRate.startsWith("+") || parseFloat(changeRate) > 0;
  const isFall = changeRate.startsWith("-") || parseFloat(changeRate) < 0;
  const colorClass = isRise
    ? "text-red-500"
    : isFall
      ? "text-blue-600 dark:text-blue-400"
      : "text-foreground";

  return (
    <div className="bg-white px-3 py-2 dark:bg-brand-900/22 sm:px-4 sm:py-3">
      {/* ========== STOCK SUMMARY ========== */}
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <h1 className="truncate text-lg font-bold leading-tight text-foreground dark:text-brand-50 sm:text-xl">
            {stock.name}
          </h1>
          <span className="mt-0.5 block text-xs text-muted-foreground dark:text-brand-100/70 sm:text-sm">
            {stock.symbol}/{stock.market}
          </span>
        </div>

        <div className={cn("shrink-0 text-right", colorClass)}>
          <span className="block text-2xl font-bold tracking-tight">{price}</span>
          <span className="text-xs font-medium sm:text-sm">
            {changeRate}% <span className="ml-1 text-[11px] sm:text-xs">{change}</span>
          </span>
        </div>
      </div>

      {/* ========== STATS ========== */}
      <div className="mt-2 grid grid-cols-3 gap-2 text-xs md:hidden">
        <div className="rounded-md bg-muted/40 px-2 py-1.5 dark:border dark:border-brand-800/45 dark:bg-brand-900/25">
          <p className="text-[11px] text-muted-foreground dark:text-brand-100/70">고가</p>
          <p className="font-medium text-red-500">{high || "--"}</p>
        </div>
        <div className="rounded-md bg-muted/40 px-2 py-1.5 dark:border dark:border-brand-800/45 dark:bg-brand-900/25">
          <p className="text-[11px] text-muted-foreground dark:text-brand-100/70">저가</p>
          <p className="font-medium text-blue-600 dark:text-blue-400">{low || "--"}</p>
        </div>
        <div className="rounded-md bg-muted/40 px-2 py-1.5 dark:border dark:border-brand-800/45 dark:bg-brand-900/25">
          <p className="text-[11px] text-muted-foreground dark:text-brand-100/70">거래량(24H)</p>
          <p className="font-medium">{volume || "--"}</p>
        </div>
      </div>

      <Separator className="mt-2 md:hidden" />

      {/* ========== DESKTOP STATS ========== */}
      <div className="hidden items-center justify-end gap-6 pt-1 text-sm md:flex">
        <div className="flex flex-col items-end">
          <span className="text-muted-foreground text-xs dark:text-brand-100/70">고가</span>
          <span className="font-medium text-red-500">{high || "--"}</span>
        </div>
        <div className="flex flex-col items-end">
          <span className="text-muted-foreground text-xs dark:text-brand-100/70">저가</span>
          <span className="font-medium text-blue-600 dark:text-blue-400">{low || "--"}</span>
        </div>
        <div className="flex flex-col items-end">
          <span className="text-muted-foreground text-xs dark:text-brand-100/70">거래량(24H)</span>
          <span className="font-medium">{volume || "--"}</span>
        </div>
      </div>
    </div>
  );
}