import { action } from '@storybook/addon-actions'
import React from 'react'
import { ToggleButtonGroup } from '.'

export const toggleButtons = () => (
  <React.Fragment>
    <ToggleButtonGroup
      onChange={action('onChange')}
      value="x2"
      items={[
        { value: 'x', label: 'Hello' },
        { value: 'x2', label: 'veryyyyyyy looooooooong name' },
        { value: 'x3', label: 'Revolut' },
      ]}
    />
    <br />
    <br />
    <ToggleButtonGroup
      onChange={action('onChange')}
      value="x2"
      renderLabel={({ size, label }) => (
        <ToggleButtonGroup.ShortenedContent maxWidth={150} size={size}>
          {label}
        </ToggleButtonGroup.ShortenedContent>
      )}
      items={[
        { value: 'x', label: 'Hello' },
        { value: 'x2', label: 'veryyyyyyy looooooooong name' },
        { value: 'x4', label: 'Test' },
        { value: 'x3', label: 'Revolut' },
      ]}
    />
  </React.Fragment>
)

export default {
  component: ToggleButtonGroup,
  title: 'ToggleButtonGroup',
}