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

import { RooButton } from "../ui-components/RooButton";
import { RooButtonInfo } from "../ui-components/RooButton/RooButtonInfo";

export default {
  title: "RooButton",
  component: RooButton,
} as ComponentMeta<typeof RooButton>;

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

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

export const RooButtonDetails = 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 ExtraSmallButton = Template.bind({});
ExtraSmallButton.args = {
  title: "Extra Small Button",
  buttonType: "primary",
  size: "xsmall",
};

export const TallButton = Template.bind({});
TallButton.args = {
  title: "Tall Button",
  buttonType: "primary",
  size: "tall",
}
