import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
import { Examples, Example, Note, Title,CustomArgsTable } from '@calcom/storybook/components'
import TokenHandler from './TokenHandler'

<Meta title="UI/TokenHandler" component={TokenHandler} />

<Title title="TokenHandler"  subtitle="Version 0.1"/>

## Structure

<TokenHandler digits={[
    {
      value: "1",
      onChange: (e) => {},
    },
    {
      value: "2",
      onChange: (e) => {},
    },
    {
      value: "3",
      onChange: (e) => {},
    },
    {
      value: "4",
      onChange: (e) => {},
    },
    {
      value: "5",
      onChange: (e) => {},
    },
    {
      value: "6",
      onChange: (e) => {},
    },
  ]} digitClassName="digit-input" />

#all the numbers should be visible while the first one is focused