import Icon from '../../icon';
import React from 'react';
import ReactDOM from 'react-dom';
import Tag from '..';

const { Group: TagGroup } = Tag;
ReactDOM.render(
  <div className="tag-list">
    <h4>large size</h4>
    <TagGroup>
      <Tag type="normal" size="large">
        Normal large Tag
      </Tag>
      <Tag type="primary" size="large">
        Primary large Tag
      </Tag>
      <Tag size="large">
        <Icon type="smile" /> Tag With Icon
      </Tag>
    </TagGroup>
    <br/>
    <div style={{ background: '#f3f3f3', padding: '10px' }}>
      <TagGroup>
        <Tag type="normal" size="large" theme='grey'>
        Normal large Tag
        </Tag>
        <Tag type="primary" size="large" theme='grey'>
        Primary large Tag
        </Tag>
        <Tag size="large" theme='grey'>
          <Icon type="smile" /> Tag With Icon
        </Tag>
      </TagGroup>
    </div>
    <h4>medium(default) size</h4>
    <TagGroup>
      <Tag type="normal" size="medium">
        Normal Tag
      </Tag>
      <Tag type="primary">Primary Tag</Tag>
      <Tag>
        <Icon type="smile" /> Tag With Icon
      </Tag>
    </TagGroup>
    <br/>
    <div style={{ background: '#f3f3f3', padding: '10px' }}>
      <TagGroup>
        <Tag type="normal" size="medium" theme='grey'>
        Normal large Tag
        </Tag>
        <Tag type="primary" size="medium" theme='grey'>
        Primary large Tag
        </Tag>
        <Tag size="medium" theme='grey'>
          <Icon type="smile" /> Tag With Icon
        </Tag>
      </TagGroup>
    </div>
    <h4>small size</h4>
    <TagGroup>
      <Tag type="normal" size="small">
        Normal Small Tag
      </Tag>
      <Tag type="primary" size="small">
        Primary Small Tag
      </Tag>
      <Tag size="small">
        <Icon type="smile" /> Tag With Icon
      </Tag>
    </TagGroup>
    <br/>
    <div style={{ background: '#f3f3f3', padding: '10px' }}>
      <TagGroup>
        <Tag type="normal" size="small" theme='grey'>
        Normal large Tag
        </Tag>
        <Tag type="primary" size="small" theme='grey'>
        Primary large Tag
        </Tag>
        <Tag size="small" theme='grey'>
          <Icon type="smile" /> Tag With Icon
        </Tag>
      </TagGroup>
    </div>
    <h4>xs size</h4>
    <TagGroup>
      <Tag type="normal" size="xs">
        Normal Small Tag
      </Tag>
      <Tag type="primary" size="xs">
        Primary Small Tag
      </Tag>
      <Tag size="xs">
        <Icon type="smile" /> Tag With Icon
      </Tag>
    </TagGroup>
    <br/>
    <div style={{ background: '#f3f3f3', padding: '10px' }}>
      <TagGroup>
        <Tag type="normal" size="xs" theme='grey'>
        Normal large Tag
        </Tag>
        <Tag type="primary" size="xs" theme='grey'>
        Primary large Tag
        </Tag>
        <Tag size="xs" theme='grey'>
          <Icon type="smile" /> Tag With Icon
        </Tag>
      </TagGroup>
    </div>
    <h4>link tag</h4>
    <TagGroup>
      <Tag type="normal">
        <a href="//www.alibaba.com" target="_blank">
          normal Link Tag
        </a>
      </Tag>
      <Tag type="primary">
        <a href="//www.alibaba.com" target="_blank">
          primary Link Tag
        </a>
      </Tag>
      <Tag size="small">
        <a href="//www.alibaba.com" target="_blank">
          <Icon type="smile" /> Link Tag With Icon
        </a>
      </Tag>
    </TagGroup>
    <div style={{ background: '#f3f3f3', padding: '10px' }}>
      <TagGroup>
        <Tag type="normal" theme='grey'>
          <a href="//www.alibaba.com" target="_blank">
          normal Link Tag
          </a>
        </Tag>
        <Tag type="primary" theme='grey'>
          <a href="//www.alibaba.com" target="_blank">
          primary Link Tag
          </a>
        </Tag>
        <Tag size="small" theme='grey'>
          <a href="//www.alibaba.com" target="_blank">
            <Icon type="smile" /> Link Tag With Icon
          </a>
        </Tag>
      </TagGroup>
    </div>
  </div>,
  document.getElementById('tag-demo-2'),
);