Slider

"use client";

import { useState } from "react";
import { NumberField } from "@/registry/ds/number-field";
import { Slider } from "@/registry/ds/slider";

/** Un valor, dos controles: el slider para explorar, el campo numérico para escribir el número exacto */
export default function SliderControlled() {
  const [cuota, setCuota] = useState<number | null>(45000);
  const pesos = (v: number) => `$ ${v.toLocaleString("es-AR")}`;

  return (
    <div className="flex w-80 flex-col gap-5">
      <Slider label="Cuota máxima" min={10000} max={150000} step={1000} value={cuota ?? 10000} onValueChange={(v) => setCuota(Array.isArray(v) ? v[0] : v)} showValue format={pesos} />
      <NumberField aria-label="Cuota máxima, exacta" size="sm" value={cuota} onValueChange={setCuota} min={10000} max={150000} step={1000} format={{ style: "currency", currency: "ARS", maximumFractionDigits: 0 }} className="max-w-48" />
      <p className="text-sm text-fg-muted">
        {cuota !== null && cuota >= 100000 ? "Entran todas las carreras." : "7 carreras dentro del presupuesto."}
      </p>
    </div>
  );
}