import * as React from 'react';
import { Avatar, Row, Icon, Col, Button } from '@btri-ui/base';

export default () => {
  const texts = ['User', 'IB', 'Design'];
  const [textIndex, setTextIndex] = React.useState(0);

  return (
    <Row autoMode={true}>
      <Col span={1}>
        <Avatar>{texts[textIndex]}</Avatar>
      </Col>
      <Col span={1}>
        <Button
          onClick={() => {
            setTextIndex(index => (index + 1) % 3);
          }}
        >
          Change
        </Button>
      </Col>
    </Row>
  );
};