import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from 'react';
import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils';
import { IconAddMediumOutline } from '@teamleader/ui-icons';
import Button from '../button';
import ButtonGroup from './ButtonGroup';
export default {
  component: ButtonGroup,
  title: addStoryInGroup(LOW_LEVEL_BLOCKS, 'Button group')
};
export var Normal = function Normal(args) {
  return /*#__PURE__*/React.createElement(ButtonGroup, args, /*#__PURE__*/React.createElement(Button, {
    label: "Button 1"
  }), /*#__PURE__*/React.createElement(Button, {
    label: "Button 2"
  }), /*#__PURE__*/React.createElement(Button, {
    icon: /*#__PURE__*/React.createElement(IconAddMediumOutline, null)
  }));
};
export var withActive = function withActive() {
  var _useState = useState('option2'),
      _useState2 = _slicedToArray(_useState, 2),
      value = _useState2[0],
      setValue = _useState2[1];

  var handleChange = function handleChange(value) {
    setValue(value);
  };

  return /*#__PURE__*/React.createElement(ButtonGroup, {
    segmented: true,
    value: value,
    onChange: handleChange,
    level: "secondary"
  }, /*#__PURE__*/React.createElement(Button, {
    label: "Option 1",
    value: "option1"
  }), /*#__PURE__*/React.createElement(Button, {
    label: "Option 2",
    value: "option2"
  }), /*#__PURE__*/React.createElement(Button, {
    label: "Option 3",
    value: "option3"
  }));
};
withActive.storyName = 'With active';