import React from 'react';

import { ComponentStory, ComponentMeta } from '@storybook/react';

import { Switch } from './Switch';
import { THEME } from '../../constants';

export default {
  title: 'ReactComponentLibrary/Switch',
  component: Switch,
  decorators: [
    (Story): JSX.Element => (
      <div className="centered-layout">
        <Story />
      </div>
    ),
  ],
} as ComponentMeta<typeof Switch>;

const Template: ComponentStory<typeof Switch> = (args) => (
  <Switch
    {...args}
    className="custom-classname"
    label="Label"
  />
);

export const LightDefaultSwitch = Template.bind({});
LightDefaultSwitch.args = {
  theme: THEME.light,
};

export const DarkDefaultSwitch = Template.bind({});
DarkDefaultSwitch.parameters = {
  backgrounds: { default: 'dark' },
};