arbret/frontend/app/components/StatusBadge.tsx

"use client";

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

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;
}

const STATUS_KEY_MAP: Record<string, string> = {
  booked: "pending",
  completed: "completed",
  cancelled_by_user: "userCancelled",
  cancelled_by_admin: "adminCancelled",
  no_show: "noShow",
};

/**
 * 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) {
  const t = useTranslation("exchange");
  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;
    }
  }

  const displayText = tradeStatus
    ? t(`status.${STATUS_KEY_MAP[tradeStatus] || tradeStatus}`)
    : children;

  return <span style={{ ...badgeStyle, ...style }}>{displayText}</span>;
}