import React, { useState } from 'react';
import { NumberInput } from '.';

export default {
  title: 'NumberInput',
  component: NumberInput,
};

export const PoitiveWithSeperator = () => {
  const [value, setValue] = useState('');
  return (
    <>
      <NumberInput
        onChange={(e) => setValue(e.target.value)}
        value={value}
        thousandSeparator={true}
        allowNegative={false}
      ></NumberInput>
      To see list of all properties, visit{' '}
      <a href="https://github.com/s-yadav/react-number-format#readme">
        react-number-format
      </a>
    </>
  );
};

export const PhoneMask = () => {
  const [value, setValue] = useState('');
  return (
    <NumberInput
      onChange={(e) => setValue(e.target.value)}
      value={value}
      format="+1 (###)-###-####"
      mask="_"
      placeholder="+1 (123)-456-7890"
    ></NumberInput>
  );
};
