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

import { Switch } from "./../ui-components/ExampleAntSwitch";
import { ExampleInfo } from "../ui-components/ExampleAntSwitch/ExampleInfo";

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: "Example/AntSwitch",
  component: Switch,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
} as ComponentMeta<typeof Switch>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Switch> = (args) => <Switch {...args} />;

const InfoTemplate: ComponentStory<typeof Switch> = () => (
  <>
    <ExampleInfo />
    <div
      style={{
        marginTop: "30px",
        display: "flex",
        flexDirection: "column",
        gap: "10px",
        width: "30px",
      }}
    >
      <Switch />
      <Switch loading={true} />
    </div>
  </>
);

export const ExampleDetails = InfoTemplate.bind({});

export const Small = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
Small.args = {
  size: "small",
};

export const Loading = Template.bind({});
Loading.args = {
  loading: true,
};
