import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { fn } from 'storybook/test';

import Switch from './Switch';

type PagePropsAndCustomArgs = Pick<
  React.ComponentProps<typeof Switch>,
  | 'label'
  | 'labelClassName'
  | 'containerClassName'
  | 'wrapperClassName'
  | 'thumbClassName'
  | 'checked'
  | 'onChange'
  | 'disabled'
  | 'small'
> & {
  size?: string;
  onClick?: React.MouseEventHandler;
  test?: string;
};

const meta: Meta<PagePropsAndCustomArgs> = {
  title: 'system/Switch',
  component: Switch,
};

export default meta;
type Story = StoryObj<PagePropsAndCustomArgs>;

export const Default: Story = {
  args: {
    label: 'Custom',
    onClick: fn((checked) => console.log('Switch is now:', checked)),
  },
};

export const Disabled: Story = {
  args: {
    label: 'Custom',
    disabled: true,
    onClick: fn((checked) => console.log('Switch is now:', checked)),
  },
};

export const Small: Story = {
  args: {
    label: 'Small',
    small: true,
    onClick: fn((checked) => console.log('Switch is now:', checked)),
  },
};