import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import Button from '../components/Ui/button/Button';
import Icons from '../constants/IconArray.js';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'UI elements /Button',
  component: Button,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    variant: {defaultValue: 'primary', control:{ type:"select", options:["default", "primary", "secondary"]}},
    size: {defaultValue: 'default', control:{ type:"select", options:["default", "small", "medium", "large"]}},
    iconName: {defaultValue: 'person',control:{type: 'select', options:Icons}}
  },
} as ComponentMeta<typeof Button>;

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

export const BasicButton = Template.bind({});
BasicButton.args = {
  buttonLabel: 'Button',
  labelShow: true,
};

export const IconButton = Template.bind({});
IconButton.args = {
  labelShow: false,
  variant: 'primary',
  iconShow: true,
  iconName: 'person',
  iconPostions: 'left'
};