SlippageControl

"use client";

import { cn } from "@/lib/ledger/cn";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { Money } from "@/components/ledger/money";

export interface SlippageControlProps {
  className?: string;
  onValueChange: (percent: number) => void;
  value: number;
  /** The worst case, in absolute money. A percentage alone is not decision-grade. */
  worstCase: MoneyValue;
}

const PRESETS = [0.1, 0.5, 1];

export function SlippageControl({ value, onValueChange, worstCase, className }: SlippageControlProps) {
  return (
    <div className={cn("space-y-2", className)}>
      <span className="block text-label font-medium text-text-secondary">Slippage tolerance</span>
      <div className="flex flex-wrap items-center gap-2">
        {PRESETS.map((p) => (
          <button
            aria-pressed={value === p}
            className={cn(
              "numeric h-8 rounded-sm border px-3 text-label font-medium",
              "transition-colors duration-1 ease-standard",
              value === p
                ? "border-accent bg-accent-subtle text-accent"
                : "border-border hover:bg-surface-hover",
            )}
            key={p}
            onClick={() => onValueChange(p)}
            type="button"
          >
            {p}%
          </button>
        ))}
        <label className="flex items-center gap-2">
          <span className="sr-only">Custom slippage tolerance, percent</span>
          <input
            className="numeric h-8 w-16 rounded-sm border border-border bg-surface px-2 text-label outline-none focus-visible:border-accent"
            inputMode="decimal"
            onChange={(e) => onValueChange(Number(e.target.value.replace(/[^\d.]/g, "")) || 0)}
            type="text"
            value={value}
          />
          <span aria-hidden="true" className="text-label text-text-secondary">
            %
          </span>
        </label>
      </div>
      <p className="text-caption text-text-secondary">
        You’ll receive at least <Money showCode size="xs" tone="inherit" value={worstCase} />.
      </p>
    </div>
  );
}