"use client";

import { euro } from "@/lib/format";

/**
 * "Aantal: [n] × €prijs" invoerregel voor kosten die per stuk worden
 * aangerekend (pandregister, bodemattest per perceel, hypothecaire staat
 * per goed, …). Minimum 1.
 */
export default function AantalInput({
  aantal,
  eenheidsprijs,
  onChange,
}: {
  aantal: number;
  eenheidsprijs: number;
  onChange: (n: number) => void;
}) {
  return (
    <div className="flex items-center gap-1 mt-0.5" onClick={(e) => e.stopPropagation()}>
      <span className="text-[11px] text-slate-400">Aantal:</span>
      <input
        type="number"
        min={1}
        value={aantal}
        onChange={(e) => onChange(Math.max(1, parseInt(e.target.value) || 1))}
        className="w-12 text-xs border border-slate-300 rounded-md px-1 py-0.5 text-center focus:outline-none focus:ring-1 focus:ring-brand-400"
      />
      <span className="text-[11px] text-slate-400">× {euro(eenheidsprijs)}</span>
    </div>
  );
}