import type { Meta, StoryObj } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Checkbox from './Checkbox';

/** The `Checkbox` component allows users to toggle between checked and unchecked states. */

const meta: Meta<typeof Checkbox> = {
  title: 'Inputs/Checkbox',
  component: Checkbox,
  parameters: {
    controls: {
      include: ['checked', 'disabled', 'label', 'onChange'],
    },
  },
};

export default meta;
type Story = StoryObj<typeof Checkbox>;

export const Default: Story = {
  args: {
    onChange: action('onChange'),
  },
};

export const Checked: Story = {
  args: {
    checked: true,
  },
};

export const DefaultWithLabel: Story = {
  args: {
    label: 'Option',
  },
};

export const CheckedWithLabel: Story = {
  args: {
    label: 'Option',
    checked: true,
  },
};

export const DisabledNoLabel: Story = {
  args: {
    disabled: true,
  },
};

export const DisabledUnchecked: Story = {
  args: {
    disabled: true,
    label: 'Option',
  },
};

export const DisabledChecked: Story = {
  args: {
    disabled: true,
    checked: true,
    label: 'Option',
  },
};

export const MixedState: Story = {
  args: {
    checked: 'mixed',
  },
};

export const MixedStateWithLabel: Story = {
  args: {
    checked: 'mixed',
    label: 'Option',
  },
};

export const MixedStateWithLabelDisabled: Story = {
  args: {
    checked: 'mixed',
    label: 'Option',
	disabled: true,
  },
};