/* eslint-disable react-hooks/rules-of-hooks */
import React from 'react';
import { useState } from '@storybook/addons';
import Checkbox from '.';
import { Stack } from '../Layout';
import { Text } from '../Text';

export default {
  title: 'Components|Checkbox',
  component: Checkbox,
};

export const index = () => {
  const [checked, setChecked] = useState(false);
  return (
    <Stack>
      <Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)}>
        Checkbox
      </Checkbox>
      <Checkbox disabled>Disabled checkbox</Checkbox>
      <Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)}>
        Checkbox with <br /> multiline label <br />
        <Text color="Mid Neutral 1" trim={false}>
          And more multiline text <br />
          in another colour
        </Text>
      </Checkbox>
    </Stack>
  );
};