import { NumberInput } from '@wandercom/design-system-web/ui/number-input';

export function Example() {
  const [value, setValue] = useState<number | null>(5);

  return (
    <NumberInput
      value={value}
      min={0}
      max={10}
      step={1}
      onChange={setValue}
    />
  );
}

const [value, setValue] = useState<number | null>(null);

<NumberInput
  value={value}
  min={0}
  max={100}
  step={5}
  placeholder="Any"
  onChange={setValue}
/>

const [value, setValue] = useState<number | null>(50);

<NumberInput
  value={value}
  min={0}
  max={500}
  step={25}
  currency="USD"
  onChange={setValue}
/>

const [value, setValue] = useState<number | null>(null);

<NumberInput
  value={value}
  min={1}
  max={10}
  step={1}
  placeholder="None"
  onChange={setValue}
/>

import { Label } from '@wandercom/design-system-web/ui/label';

const [usValue, setUsValue] = useState<number | null>(1500);
const [deValue, setDeValue] = useState<number | null>(1500);
const [gbValue, setGbValue] = useState<number | null>(1500);
const [jpValue, setJpValue] = useState<number | null>(1500);

<div className="flex flex-col gap-4">
  <div className="flex flex-col gap-2">
    <Label htmlFor="us-input">United States (en-US)</Label>
    <NumberInput
      id="us-input"
      value={usValue}
      min={0}
      max={10000}
      step={100}
      currency="USD"
      locale="en-US"
      onChange={setUsValue}
    />
  </div>
  <div className="flex flex-col gap-2">
    <Label htmlFor="de-input">Germany (de-DE)</Label>
    <NumberInput
      id="de-input"
      value={deValue}
      min={0}
      max={10000}
      step={100}
      currency="EUR"
      locale="de-DE"
      onChange={setDeValue}
    />
  </div>
  <div className="flex flex-col gap-2">
    <Label htmlFor="gb-input">United Kingdom (en-GB)</Label>
    <NumberInput
      id="gb-input"
      value={gbValue}
      min={0}
      max={10000}
      step={100}
      currency="GBP"
      locale="en-GB"
      onChange={setGbValue}
    />
  </div>
  <div className="flex flex-col gap-2">
    <Label htmlFor="jp-input">Japan (ja-JP)</Label>
    <NumberInput
      id="jp-input"
      value={jpValue}
      min={0}
      max={10000}
      step={100}
      currency="JPY"
      locale="ja-JP"
      onChange={setJpValue}
    />
  </div>
</div>