import React from 'react';
import styled from 'styled-components';

import {
  ButtonGroupComponent,
  Button,
  Icon
} from '@alicloud/console-components';

import {
  ITestingProps
} from '../../types';

const ScDemoButton = styled.div`
  .next-btn-group {
    margin-right: 16px;
  }
`;

export default function Testing({
  component
}: ITestingProps<ButtonGroupComponent>): JSX.Element {
  const ButtonGroup = component;
  
  return <ScDemoButton>
    <ButtonGroup>
      <Button type="primary">OK</Button>
      <Button type="secondary">Cancel</Button>
    </ButtonGroup>
    <ButtonGroup>
      <Button disabled>Left</Button>
      <Button disabled>Middle</Button>
      <Button disabled>Right</Button>
    </ButtonGroup>
    <ButtonGroup>
      <Button type="primary">
        <Icon type="arrow-left" /> Backward
      </Button>
      <Button type="primary">
        Forward <Icon type="arrow-right" />
      </Button>
    </ButtonGroup>
    <ButtonGroup>
      <Button type="primary">
        <Icon type="prompt" />
      </Button>
      <Button type="primary">
        <Icon type="clock" />
      </Button>
      <Button type="primary">
        <Icon type="set" />
      </Button>
    </ButtonGroup>
  </ScDemoButton>;
}