import { ComponentMeta, ComponentStory } from "@storybook/react";
import * as React from "react";
import { NumberInput } from "./";

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: "Example/NumberInput",
  component: NumberInput,
} as ComponentMeta<typeof NumberInput>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof NumberInput> = (args) => {
  const [value, setValue] = React.useState(0);
  return (
    <div>
      <NumberInput
        data-component="NumberInput$Brevity"
        required
        {...args}
        defaultValue={value}
        onChange={(e) => {
          console.log("change", e.target.valueAsNumber);
          setValue(e.target.valueAsNumber);
        }}
      />
    </div>
  );
};

export const Primary = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
Primary.args = {};