import { cn } from "@/lib/utils";
import type { ExperienceSignalStatus, ExperienceTrendDirection } from "@/lib/experienciometro/types";

const SIGNAL_LABELS: Record<ExperienceSignalStatus, string> = {
  green: "Excelente",
  yellow: "Atención",
  red: "Crítico",
};

const SIGNAL_CLASSES: Record<ExperienceSignalStatus, string> = {
  green: "bg-benell-green/10 text-benell-green",
  yellow: "bg-benell-amber/10 text-benell-amber",
  red: "bg-benell-red/10 text-benell-red",
};

const TREND_LABELS: Record<ExperienceTrendDirection, string> = {
  up: "Subió",
  down: "Bajó",
  flat: "Sin cambio",
};

const TREND_CLASSES: Record<ExperienceTrendDirection, string> = {
  up: "bg-benell-green/10 text-benell-green",
  down: "bg-benell-red/10 text-benell-red",
  flat: "bg-benell-surface-muted text-benell-text-soft",
};

export function SignalPill({ signal }: { signal: ExperienceSignalStatus }) {
  return <span className={cn("rounded-pill px-2.5 py-1 text-xs font-semibold", SIGNAL_CLASSES[signal])}>{SIGNAL_LABELS[signal]}</span>;
}

export function TrendPill({ trendDirection, delta }: { trendDirection: ExperienceTrendDirection; delta: number }) {
  const signedDelta = delta > 0 ? `+${delta.toFixed(1)}` : delta.toFixed(1);

  return (
    <span className={cn("rounded-pill px-2.5 py-1 text-xs font-semibold", TREND_CLASSES[trendDirection])}>
      {TREND_LABELS[trendDirection]} ({signedDelta})
    </span>
  );
}
