// import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { DashboardStockItem } from "@/features/dashboard/types/dashboard.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-500"
      : "text-foreground";

  return (
    <div className="flex items-center justify-between px-4 py-3">
      {/* Left: Stock Info */}
      <div className="flex items-center gap-4">
        <div className="flex items-center gap-2">
          <h1 className="text-xl font-bold">{stock.name}</h1>
          <span className="text-sm text-muted-foreground">
            {stock.symbol}/{stock.market}
          </span>
        </div>

        <Separator orientation="vertical" className="h-6" />

        <div className={cn("flex items-end gap-2", colorClass)}>
          <span className="text-2xl font-bold tracking-tight">{price}</span>
          <span className="text-sm font-medium mb-1">
            {changeRate}% <span className="text-xs ml-1">{change}</span>
          </span>
        </div>
      </div>

      {/* Right: 24h Stats */}
      <div className="hidden md:flex items-center gap-6 text-sm">
        <div className="flex flex-col items-end">
          <span className="text-muted-foreground text-xs">고가</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">저가</span>
          <span className="font-medium text-blue-500">{low || "--"}</span>
        </div>
        <div className="flex flex-col items-end">
          <span className="text-muted-foreground text-xs">거래량(24H)</span>
          <span className="font-medium">{volume || "--"}</span>
        </div>
      </div>
    </div>
  );
}