import type { Meta } from "@storybook/react"
import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "./InputOtp"

export default {
  title: "input-otp/InputOTP",
  component: InputOTP,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
  },
} as Meta<typeof InputOTP>

export const Basic = () => (
  <InputOTP maxLength={6}>
    <InputOTPGroup className="flex gap-2">
      {Array.from({ length: 6 }).map((_, index) => (
        <InputOTPSlot key={`slot-${index}-${Math.random()}`} index={index} />
      ))}
    </InputOTPGroup>
  </InputOTP>
)

export const WithSeparator = () => {
  return (
    <InputOTP maxLength={4}>
      <InputOTPGroup>
        <InputOTPSlot index={0} />
        <InputOTPSlot index={1} />
        <InputOTPSeparator />
        <InputOTPSlot index={2} />
        <InputOTPSlot index={3} />
      </InputOTPGroup>
    </InputOTP>
  )
}