import {createButton} from './ButtonComponent';

export default {
    title: 'Atoms/Button',
    argTypes: {
        label: {
            name: 'Button-Text',
            control: 'text',
            defaultValue: 'Button',
        },
        size: {
            name: 'Größe',
            control: {type: 'select'},
            options: ['regular', 'small'],
            defaultValue: 'regular',
        },
        color: {
            name: 'Farbe',
            control: {type: 'select'},
            options: ['primary', 'secondary', 'primary-light', 'white'],
            defaultValue: 'primary',
        },
        iconPosition: {
            name: 'Icon-Position',
            control: {type: 'select'},
            options: ['none', 'icon-left', 'icon-right'],
            defaultValue: 'none',
        },
        icon: {
            name: 'Icon',
            control: {type: 'select'},
            options: ['pfeil-rechts', 'pfeil-simple-rechts', 'galerie', 'kalender'],
        },
    },
};

const Template = ({label, ...args}) => {
    return createButton({label, ...args});
};

export const PrimaryButton = Template.bind({});
PrimaryButton.args = {
    //primary: true,
};

export const SecondaryButton = Template.bind({});
SecondaryButton.args = {
    color: 'secondary',
};

export const GalleryToggle = Template.bind({});
GalleryToggle.args = {
    label: 'Galerie öffnen',
    iconPosition: 'icon-right',
    icon: 'galerie',
};

export const LightArrowButton = Template.bind({});
LightArrowButton.args = {
    color: 'primary-light',
    label: 'Buttontext',
    iconPosition: 'icon-left',
    icon: 'pfeil-rechts',
};

export const SmallButton = Template.bind({});
SmallButton.args = {
    size: 'small',
};

export const SliderButton = Template.bind({});
SliderButton.args = {
    label: '1',
};