import React, { useEffect, useState } from 'react'

import { ComponentStory, ComponentMeta } from '@storybook/react'

import { Checkbox } from '../components'

export default {
  title: 'Form/Checkbox',
  component: Checkbox,
} as ComponentMeta<typeof Checkbox>

const Template: ComponentStory<typeof Checkbox> = (args) => {
  const [checked, setChecked] = useState(false)

  useEffect(() => {
    setChecked(args.checked)
  }, [args])

  return (
    <Checkbox {...args} checked={checked} onChange={(e) => setChecked(e)} />
  )
}

export const Element = Template.bind({})

Element.args = {
  label: 'Checkbox Label',
  checked: false,
}
