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

const Base = () => {
  return (
    <>
      <Row autoMode={true}>
        <Col span={2}>
          <Avatar.Group>
            <Avatar icon={<Icon iconName="Avatar" />} />
            <Avatar icon={<Icon iconName="Avatar" />} />
            <Avatar icon={<Icon iconName="Avatar" />} />
          </Avatar.Group>
        </Col>
        <Col span={2}>
          <Avatar.Group maxCount={2} maxPopoverTrigger="click">
            <Avatar icon={<Icon iconName="Avatar" />} />
            <Avatar icon={<Icon iconName="Avatar" />} />
            <Avatar icon={<Icon iconName="Avatar" />} />
          </Avatar.Group>
        </Col>
        <Col span={2}>
          <Avatar.Group maxCount={2} maxPopoverTrigger="click" maxText="more">
            <Avatar icon={<Icon iconName="Avatar" />} />
            <Avatar icon={<Icon iconName="Avatar" />} />
            <Avatar icon={<Icon iconName="Avatar" />} />
          </Avatar.Group>
        </Col>
        <Col span={2}>
          <Avatar.Group maxCount={2} maxPopoverTrigger="click" maxText="...">
            <Avatar icon={<Icon iconName="Avatar" />} />
            <Avatar icon={<Icon iconName="Avatar" />} />
            <Avatar icon={<Icon iconName="Avatar" />} />
          </Avatar.Group>
        </Col>
        <Col span={2}>
          <Avatar.Group size="large" maxCount={2} maxPopoverTrigger="click">
            <Avatar icon={<Icon iconName="Avatar" />} />
            <Avatar icon={<Icon iconName="Avatar" />} />
            <Avatar icon={<Icon iconName="Avatar" />} />
          </Avatar.Group>
        </Col>
      </Row>
    </>
  );
};

export default Base;