import { memo } from 'react';

interface ResultBadgeProps {
  value: number | string | null | undefined;
  unit?: string;
  isFeasible?: boolean; // For constraints
  label?: string;
}

export const ResultBadge = memo(function ResultBadge({ value, unit, isFeasible, label }: ResultBadgeProps) {
  if (value === null || value === undefined) return null;

  const displayValue = typeof value === 'number' 
    ? value.toLocaleString(undefined, { maximumFractionDigits: 4 }) 
    : value;

  // Determine color based on feasibility (if provided)
  let bgColor = 'bg-primary-500/20';
  let textColor = 'text-primary-300';
  let borderColor = 'border-primary-500/30';

  if (isFeasible === true) {
    bgColor = 'bg-emerald-500/20';
    textColor = 'text-emerald-300';
    borderColor = 'border-emerald-500/30';
  } else if (isFeasible === false) {
    bgColor = 'bg-red-500/20';
    textColor = 'text-red-300';
    borderColor = 'border-red-500/30';
  }

  return (
    <div className={`absolute -top-3 -right-2 px-2 py-0.5 rounded-full border ${bgColor} ${borderColor} ${textColor} text-xs font-mono shadow-lg backdrop-blur-sm z-10 flex items-center gap-1`}>
      {label && <span className="opacity-70 mr-1">{label}:</span>}
      <span className="font-bold">{displayValue}</span>
      {unit && <span className="opacity-70 text-[10px] ml-0.5">{unit}</span>}
    </div>
  );
});