import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { Switch } from '../../src/switch/switch';
import palette from '../../src/styles/palette';
import { useState } from 'react';

<Meta title="Components/Switch" component={Switch} />

export const Template = (args) => {
    const [value, setValue] = useState(false);
    console.log({ value });
    return (
        <>
            {Object.keys(palette).map((paletteColor) => (
                <Switch color={paletteColor} {...args} onChange={() => setValue(!value)} checked={value} />
            ))}
        </>
    );
};

# Regular

<Canvas>
    <Story name="Regular">{Template.bind({})}</Story>
</Canvas>

# Disabled

<Canvas>
    <Story
        name="Disabled"
        args={{
            disabled: true,
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

# Small

<Canvas>
    <Story
        name="Small"
        args={{
            size: 'small',
        }}
        parameters={{
            color: {
                values: Object.keys(palette),
            },
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>