import { ComponentMeta, ComponentStory } from "@storybook/react";
import { OTP } from "./";

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

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof OTP> = (args) => (
  <>
    <h1>Hello world</h1>
    <OTP
      data-component="OTP$Brevity"
      maxLength={6}
      onComplete={(code) => {
        console.log(code);
      }}
    >
      <OTP.OTPSlot data-component="OTP$Brevity.OTPSlot" index={0} />
      <OTP.OTPSlot data-component="OTP$Brevity.OTPSlot" index={1} />
      <OTP.OTPSlot data-component="OTP$Brevity.OTPSlot" index={2} />
      <OTP.OTPSlot data-component="OTP$Brevity.OTPSlot" index={3} />
      <OTP.OTPSlot data-component="OTP$Brevity.OTPSlot" index={4} />
      <OTP.OTPSlot data-component="OTP$Brevity.OTPSlot" index={5} />
    </OTP>
  </>
);

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