import { ref } from 'vue'
import ARKCheckbox from './ARKCheckbox.vue'

export default {
  title: 'The Design system/Checkbox',
  component: ARKCheckbox,
  tags: ['autodocs'],
  args: {
    isDisabled: false,
    modelValue: false,
    onValueChange: undefined,
  },
}

const value = ref(false)

const Template = (args: any) => ({
  props: Object.keys(args),
  render() {
    return (
      <div>
        <p style="font-size: 14px; line-height: 16px; color: #27282E; margin: 10px 0 14px;">Чекбокс</p>
        <ARKCheckbox
          { ...args }
          modelValue={value.value}
          onValueChange={() => { value.value = !value.value }} />
      </div>
    )
  },
})

export const Primary = Template.bind({})