"use client";

// Slider + number stepper + "All" toggle for one generation direction
// (ancestors or descendants). Shared by the member and public tree views.
export function DepthControl({
  label,
  icon,
  value,
  all,
  onValue,
  onAll,
  disabled,
}: {
  label: string;
  icon: string;
  value: number;
  all: boolean;
  onValue: (v: number) => void;
  onAll: (b: boolean) => void;
  disabled?: boolean;
}) {
  return (
    <div className={`flex items-center gap-2 ${disabled ? "opacity-40" : ""}`}>
      <span className="flex w-24 items-center gap-1 text-xs text-[var(--muted)]">
        <span aria-hidden>{icon}</span> {label}
      </span>
      <input
        type="range"
        min={0}
        max={12}
        step={1}
        value={all ? 12 : value}
        disabled={disabled || all}
        onChange={(e) => onValue(Number(e.target.value))}
        className="w-28 accent-bronze"
        aria-label={`${label} generations`}
      />
      {all ? (
        <span className="w-10 text-center text-sm font-medium text-bronze">All</span>
      ) : (
        <input
          type="number"
          min={0}
          max={99}
          value={value}
          disabled={disabled}
          onChange={(e) => onValue(Math.max(0, Math.min(99, Number(e.target.value) || 0)))}
          className="h-7 w-12 rounded-md border border-[var(--border)] bg-[var(--surface)] px-1 text-center text-sm"
        />
      )}
      <button
        type="button"
        disabled={disabled}
        onClick={() => onAll(!all)}
        title={`Show all ${label.toLowerCase()}`}
        className={`rounded-md px-2 py-1 text-xs transition-colors ${
          all
            ? "bg-bronze text-paper"
            : "border border-[var(--border)] text-[var(--muted)] hover:text-[var(--foreground)]"
        }`}
      >
        All
      </button>
    </div>
  );
}