import React from 'react';
import ReactDOM from 'react-dom';
import Tag from '..';
const { Group: TagGroup } = Tag;
const presetColors = [ 'blue', 'green', 'orange', 'red', 'turquoise', 'yellow' ];
// set custom color with hex value, do not use color keywords
const presetColors2 = [
  { bg: '#FFD4D4', color: '#A0260C' },
  {
    bg: '#FFD9D1',
    color: '#C62F0E',
  },
  {
    bg: '#FFD1E7',
    color: '#C61E6E',
  },
  {
    bg: '#E5D8FF',
    color: '#7B38F4',
  },
  {
    bg: '#D1DDFF',
    color: '#6045FF',
  },
  {
    bg: '#B9E0FF',
    color: '#1B58F4',
  },
  {
    bg: '#9CF1D9',
    color: '#007855',
  },
  {
    bg: '#D9D9D9',
    color: '#404040',
  },
  {
    bg: '#EDEDED',
    color: '#404040',
  },
];

ReactDOM.render(
  <div className="tag-list">
    <h4>preset colors</h4>
    <TagGroup>
      {presetColors.map(color => (
        <Tag key={`p_n_${color}`} type="normal" color={color}>
          {color}
        </Tag>
      ))}
    </TagGroup>

    <TagGroup>
      {presetColors.map(color => (
        <Tag key={`p_p_${color}`} type="primary" color={color}>
          {color}
        </Tag>
      ))}
    </TagGroup>

    <h4>custom colors</h4>

    <TagGroup>
      {presetColors2.map(color => (
        <Tag key={`p_n_${color.bg}`} type="normal" color={color.bg}>
          <span style={{ color: color.color }}>标签</span>
        </Tag>
      ))}
    </TagGroup>
  </div>,
  document.getElementById('tag-demo-4'),
);
