arbret/frontend/app/components/StatusBadge.tsx

import { badgeStyles } from "../styles/shared";
import { getTradeStatusDisplay } from "../utils/exchange";

type StatusBadgeVariant = "success" | "error" | "ready";

interface StatusBadgeProps {
  /** Status text to display */
  children: React.ReactNode;
  /** Optional variant for simple status badges */
  variant?: StatusBadgeVariant;
  /** Trade status (uses getTradeStatusDisplay for styling) */
  tradeStatus?: string;
  /** Custom style override */
  style?: React.CSSProperties;
}

/**
 * Standardized status badge component.
 * Can be used with a variant prop for simple badges, or tradeStatus prop for trade-specific styling.
 */
export function StatusBadge({ children, variant, tradeStatus, style }: StatusBadgeProps) {
  let badgeStyle: React.CSSProperties = { ...badgeStyles.badge };

  if (tradeStatus) {
    // Use trade status display utility for trade-specific badges
    const statusDisplay = getTradeStatusDisplay(tradeStatus);
    badgeStyle = {
      ...badgeStyle,
      background: statusDisplay.bgColor,
      color: statusDisplay.textColor,
    };
  } else if (variant) {
    // Use variant styles for simple badges
    switch (variant) {
      case "success":
        badgeStyle = { ...badgeStyle, ...badgeStyles.badgeSuccess };
        break;
      case "error":
        badgeStyle = { ...badgeStyle, ...badgeStyles.badgeError };
        break;
      case "ready":
        badgeStyle = { ...badgeStyle, ...badgeStyles.badgeReady };
        break;
    }
  }

  return (
    <span style={{ ...badgeStyle, ...style }}>
      {tradeStatus ? getTradeStatusDisplay(tradeStatus).text : children}
    </span>
  );
}