"use client";
import { useMemo, useState } from "react";
import { pula } from "@/lib/format";

export default function DepositChooser(props: {
  price: number; recommended: number; min: number; max: number; onChange: (amount: number) => void;
}) {
  const { price, recommended, min, max, onChange } = props;
  const [amount, setAmount] = useState(recommended);

  const steps = useMemo(() => {
    const mid = Math.min(max, Math.max(min, Math.round(price * 0.5 * 100) / 100));
    return [
      { label: "Min", value: min },
      { label: "20% (Rec)", value: recommended },
      { label: "50%", value: mid },
      { label: "Full", value: max },
    ];
  }, [price, min, max, recommended]);

  function set(v: number) {
    const clamped = Math.min(max, Math.max(min, v));
    setAmount(clamped);
    onChange(clamped);
  }

  return (
    <div className="border rounded p-3">
      <div className="flex justify-between text-sm">
        <div>Min: <b>{pula(min)}</b></div>
        <div>Max: <b>{pula(max)}</b></div>
      </div>

      <div className="mt-3">
        <input type="range" min={min} max={max} step={1} value={amount} onChange={(e)=>set(Number(e.target.value))} className="w-full" />
        <div className="mt-2 text-sm">Selected deposit: <b>{pula(amount)}</b></div>
      </div>

      <div className="mt-3 flex gap-2 flex-wrap">
        {steps.map(s => (
          <button key={s.label} className="border rounded px-3 py-1 text-sm" onClick={() => set(s.value)}>
            {s.label}
          </button>
        ))}
      </div>
    </div>
  );
}