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

import { Button } from "../ui-components/Button";
import { ButtonInfo } from "../ui-components/Button/ButtonInfo";

export default {
  title: "Actions/Button",
  component: Button,
} as ComponentMeta<typeof Button>;

const Template: ComponentStory<typeof Button> = (args) => {
  return <Button {...args} />;
};

const InfoTemplate: ComponentStory<typeof Button> = () => {
  return (
    <>
      <ButtonInfo />
      <div style={{ display: "flex", flexDirection: "row", gap: "16px" }}>
        <Button title="Primary CTA" buttonType="primary" />
        <Button title="Secondary CTA" buttonType="secondary" />
      </div>
    </>
  );
};

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

export const PrimaryButton = Template.bind({});
PrimaryButton.args = {
  title: "Primary CTA",
  buttonType: "primary",
};
export const SecondaryButton = Template.bind({});
SecondaryButton.args = {
  title: "Secondary CTA",
  buttonType: "secondary",
};

export const SmallButton = Template.bind({});
SmallButton.args = {
  title: "Small Button",
  buttonType: "primary",
  size: "small",
};

export const DisabledPrimaryButton = Template.bind({});
DisabledPrimaryButton.args = {
  title: "Disabled Primary Button",
  buttonType: "primary",
  disabled: true,
}

export const DisabledSecondaryButton = Template.bind({});
DisabledSecondaryButton.args = {
  title: "Disabled Secondary Button",
  buttonType: "secondary",
  disabled: true,
}