import { useState } from 'react';
import { Checkbox } from './Checkbox';

export default {
  title: 'Inputs/Checkbox',
  component: Checkbox,
  tags: ['autodocs'],
};

export const Default = {
  render: () => {
    const [checked, setChecked] = useState(false);
    return (
      <Checkbox
        label="Accept terms and conditions"
        checked={checked}
        onChange={(e) => setChecked(e.target.checked)}
      />
    );
  },
};

export const Checked = {
  args: {
    label: 'Checked by default',
    checked: true,
  },
};

export const Disabled = {
  args: {
    label: 'Disabled checkbox',
    checked: false,
    disabled: true,
  },
};

export const DisabledChecked = {
  args: {
    label: 'Disabled and checked',
    checked: true,
    disabled: true,
  },
};

export const WithoutLabel = {
  args: {
    checked: false,
  },
};

