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 style={{ fontFamily: "Inter-Medium", color: "black" }}>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 style={{ fontFamily: "Inter-Medium", color: "black" }}>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 style={{ fontFamily: "Inter-Medium", color: "black" }}>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 style={{ fontFamily: "Inter-Medium", color: "black" }}>
          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>
      </>
    );
  },
};

export const Secondary = {
  args: {},
  render: () => {
    return (
      <>
        <h2 style={{ fontFamily: "Inter-Medium", color: "black" }}>Size</h2>
        <section className={styles["btn-wrapper"]}>
          <Button variant="secondary" size="sm">
            Small
          </Button>
          <Button variant="secondary" size="md">
            Medium
          </Button>
          <Button variant="secondary" size="lg">
            Large
          </Button>
        </section>
        <h2 style={{ fontFamily: "Inter-Medium", color: "gray" }}>Loader</h2>
        <section className={styles["btn-wrapper"]}>
          <Button variant="secondary" size="sm" loading={true}>
            Button
          </Button>
          <Button variant="secondary" size="md" loading={true}>
            Button
          </Button>
          <Button variant="secondary" size="lg" loading={true}>
            Button
          </Button>
        </section>
        <h2 style={{ fontFamily: "Inter-Medium", color: "gray" }}>Disabled</h2>
        <section className={styles["btn-wrapper"]}>
          <Button variant="secondary" size="sm" disabled={true}>
            Button
          </Button>
          <Button variant="secondary" size="md" disabled={true}>
            Button
          </Button>
          <Button variant="secondary" size="lg" disabled={true}>
            Button
          </Button>
        </section>
        <h2 style={{ fontFamily: "Inter-Medium", color: "gray" }}>
          Loader and Disabled
        </h2>
        <section className={styles["btn-wrapper"]}>
          <Button variant="secondary" size="sm" loading={true} disabled={true}>
            Button
          </Button>
          <Button variant="secondary" size="md" loading={true} disabled={true}>
            Button
          </Button>
          <Button variant="secondary" size="lg" loading={true} disabled={true}>
            Button
          </Button>
        </section>
      </>
    );
  },
};
