import type { Meta, StoryObj } from "@storybook/react";
import * as React from "react";

import { Button } from ".";

const meta: Meta<typeof Button> = {
  title: "Example/Button",
  component: Button,
};

type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  render: () => <Button value={"Click Me"} data-component="Button$Brevity" />,
};

export const Loading: Story = {
  render: () => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [isLoading, setIsLoading] = React.useState(false);
    return (
      <Button
        value={"Click Me"}
        isLoading={isLoading}
        data-component="Button$Brevity"
        onClick={() => setIsLoading((v) => !v)}
      />
    );
  },
};

export default meta;