import { Meta, StoryObj } from '@storybook/react-webpack5';
import { fn } from 'storybook/test';
import { lorem10 } from '../test-utils';
import Checkbox from './Checkbox';
import { withVariantConfig } from '../../.storybook/helpers';

const meta: Meta<typeof Checkbox> = {
  component: Checkbox,
  tags: ['!autodocs', '!manifest'],
  title: 'Forms/Checkbox/Tests',
  args: {
    label: 'This is the label',
    onChange: fn(),
  },
};
export default meta;

type Story = StoryObj<typeof Checkbox>;

export const MultipleMobile: Story = {
  render: (args) => {
    return (
      <>
        <Checkbox {...args} />
        <Checkbox {...args} checked />
        <Checkbox {...args} label={lorem10} />
        <Checkbox {...args} label={lorem10} secondary={lorem10} />
        <Checkbox {...args} disabled />
      </>
    );
  },
  ...withVariantConfig(['default', 'dark', 'rtl', 'mobile']),
};