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

import { Button }from '../ui-components/ExampleCustomButton';
import { ExampleInfo } from '../ui-components/ExampleCustomButton/ExampleInfo';
import { purpleBase, whiteBackground } from '../ui-components/constants';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Example/CustomButton',
  component: Button,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
} as ComponentMeta<typeof Button>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Button> = (args) => <Button {...args}>Example (test CI CD)</Button>;

const InfoTemplate: ComponentStory<typeof Button> = () => (
  <>
    <ExampleInfo />
    <div
      style={{
        marginTop: "30px",
        display: "flex",
        flexDirection: "column",
        gap: "10px",
        width: "30px",
      }}
    >
      <Button color={purpleBase}>1</Button>
      <Button color={whiteBackground}>2</Button>
    </div>
  </>
);

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

export const Blue = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
Blue.args = {
  color: "blue",
};

export const Yellow = Template.bind({});
Yellow.args = {
  color: "yellow",
};