import React from 'react';
import SwInputButton from '@component/customs/sw-input-button/sw-input-button'
import clsx from 'clsx'
const darkMode = [
  'true',
  'false',
]
const iconMode = [
  'true',
  'false',
]
const sizeMode = [
  '64px',
  '128px',
]
export default {
  title: 'Library / Sw Input Button',
  component: SwInputButton,
  parameters: {
    actions: {
      handles: ['onclick', 'onclick'],
    },
  },
  argTypes: {
    text: {
      type: {name: 'string'},
    },
    icon: {
      type: { name: 'boolean' },
      control: { type: 'select' },
      options: iconMode,
    },
    dark: {
      type: { name: 'boolean' },
      control: { type: 'select' },
      options: darkMode,
    },
    size: {
      type: { name: 'text' },
      control: { type: 'select' },
      options: sizeMode,
    },
  },
}
const Template = args =>
  <div className={clsx('grid gap-6 p-6 bg-adjust-tone transition-colors text-adjust-tone-03')}>
    <div className={'flex flex-col'}>
      <div><sw-input-button onclick={() => this.setClick()} text={args.text} icon={args.icon} size={args.size} dark={args.dark}></sw-input-button></div>
    </div>
  </div>

export const Full = Template.bind({})
Full.args = {
  dark: 'dark',
  icon: 'icon',
  size: 'size',
  text: 'Titolo'
}

function setClick() {
  console.log('cliccato')

}

