import React from 'react'
import { View } from '../view'
import { Button } from './Button.jsx'

export default {
  title: 'Design System/Actions/Button',
  component: Button,
  render: ({ variant }) => (
    <View layout="row" gap="m" style={{ flexWrap: 'wrap' }}>
      <Button variant={variant}>Button</Button>
      <Button prefix="select" variant={variant}>Icon Left</Button>
      <Button suffix="math-plus" variant={variant}>Icon right</Button>
      <Button disabled variant={variant}>Disabled Button</Button>
    </View>
  ),
}

export const Default = {}

export const Neutral = { args: { variant: 'neutral' } }

export const Link = { args: { variant: 'link' } }

export const CallToAction = { args: { variant: 'cta' } }

export const Danger = { args: { variant: 'danger' } }

export const Tab = { args: { variant: 'tab' } }

export const TabActive = { args: { variant: 'tab-active' } }

export const Tag = { args: { variant: 'tag' } }

export const TagActive = { args: { variant: 'tag-active' } }