import Button from "./Button";
import styles from "./Button.module.css";
export default {
  title: "Components/Base/Button",
  component: Button,
};

export const Primary = {
  args: {},
  render: () => {
    return (
      <>
        <h2 className={styles.storyTitle}>Size</h2>
        <section className={styles["btn-wrapper"]}>
          <Button variant="primary" size="sm">
            Small
          </Button>
          <Button variant="primary" size="md">
            Medium
          </Button>
          <Button variant="primary" size="lg">
            Large
          </Button>
        </section>
        <h2 className={styles.storyTitle}>Loader</h2>
        <section className={styles["btn-wrapper"]}>
          <Button variant="primary" size="sm" loading={true}>
            Button
          </Button>
          <Button variant="primary" size="md" loading={true}>
            Button
          </Button>
          <Button variant="primary" size="lg" loading={true}>
            Button
          </Button>
        </section>
        <h2 className={styles.storyTitle}>Disabled</h2>
        <section className={styles["btn-wrapper"]}>
          <Button variant="primary" size="sm" disabled={true}>
            Button
          </Button>
          <Button variant="primary" size="md" disabled={true}>
            Button
          </Button>
          <Button variant="primary" size="lg" disabled={true}>
            Button
          </Button>
        </section>
        <h2 className={styles.storyTitle}>Loader and Disabled</h2>
        <section className={styles["btn-wrapper"]}>
          <Button variant="primary" size="sm" loading={true} disabled={true}>
            Button
          </Button>
          <Button variant="primary" size="md" loading={true} disabled={true}>
            Button
          </Button>
          <Button variant="primary" size="lg" loading={true} disabled={true}>
            Button
          </Button>
        </section>
        <h2 className={styles.storyTitle}>Pagination Next & Prev</h2>
        <section className={styles["btn-wrapper"]}>
          <Button variant="primary" size="md">
            {"<<Prev"}
          </Button>
          <Button variant="primary" size="md">
            {"Next>>"}
          </Button>
        </section>
      </>
    );
  },
};
