import React from 'react'
import { Story, Meta } from '@storybook/react'
import { ServiceButton, ServiceButtonProps } from './ServiceButton'

export default {
  title: 'Actions/Service Button',
  component: ServiceButton,
  argTypes: {
    primary: {
      name: 'primary',
      description: 'Identifies the primary action in a set of buttons',
      type: { name: 'boolean', required: false },
      control: { type: 'boolean' }
    },
    disabled: {
      name: 'disabled',
      description: 'Disables the button, disallowing interaction',
      type: { name: 'boolean', required: false },
      control: { type: 'boolean' }
    },
    backgroundColor: {
      name: 'backgroundColor',
      description: 'Hex background color',
      type: { name: 'string', required: false }
    },
    onClick: {
      name: 'onClick',
      description: 'Callback when clicked',
      action: 'clicked'
    }
  }
} as Meta

const Template: Story<ServiceButtonProps> = (args: any) => (
  <ServiceButton {...args} />
)

export const Default = Template.bind({})
Default.args = {
  source: 'https://via.placeholder.com/300.png/ffffff/ffffff',
  title: 'Palenca',
  onClick: () => alert('Clicked')
}
