8bitdo-Command-Center/src/components/visualizations/TriggerPreview.tsx

interface TriggerPreviewProps {
  raw: number;
  processed: number;
  deadzone: number;
  maxActivation: number;
  label?: string;
}

/** Horizontal raw vs. processed trigger bar with deadzone/max-activation markers. */
export function TriggerPreview({ raw, processed, deadzone, maxActivation, label }: TriggerPreviewProps) {
  const width = 220;
  const height = 22;

  return (
    <div className="flex flex-col gap-1.5">
      {label && <span className="text-xs font-medium text-fg-muted">{label}</span>}
      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
        <rect x={0} y={0} width={width} height={height} rx={6} className="fill-surface-3 stroke-border" strokeWidth={1} />
        <rect x={0} y={0} width={width * processed} height={height} rx={6} className="fill-accent/70" />
        <rect x={0} y={0} width={width * raw} height={2} className="fill-fg-subtle" />
        <line x1={width * deadzone} y1={0} x2={width * deadzone} y2={height} className="stroke-warning" strokeWidth={1.5} />
        <line
          x1={width * maxActivation}
          y1={0}
          x2={width * maxActivation}
          y2={height}
          className="stroke-danger"
          strokeWidth={1.5}
        />
      </svg>
      <div className="flex justify-between font-mono text-[11px] text-fg-muted">
        <span>raw {raw.toFixed(2)}</span>
        <span>out {processed.toFixed(2)}</span>
      </div>
    </div>
  );
}