import { useState } from 'react';
import { TextInput, UseMaskPhone } from '../index';

const meta = {
  title: 'Utils / Mask Phone',
  component: UseMaskPhone,
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const Template = (args) => {
  const [phone, phoneSetter] = useState(null);

  return (
    <div>
      <TextInput
        type="number"
        title="Enter a phone number"
        callback={(e) => phoneSetter(e.target.value)}
      />

      <br />
      <strong>Phone Entered: </strong>
      {phone}
      <br />
      <strong>Masked: </strong>
      {phone && UseMaskPhone(phone)}
    </div>
  );
};

export const Default = Template.bind({});
Default.args = {};