import React from 'react';
import ReactDOM from 'react-dom';
import Tag from '..';
const { Group: TagGroup } = Tag;
const presetColors = [ 'Red', 'Orange', 'Magenta', 'Purple', 'BluePurple', 'Blue', 'Azure', 'GoldGreen' ];
// set custom color with hex value, do not use color keywords
const presetColors2 = [
  { bg: '#eafff0', color: '#29a64e' },
  {
    bg: '#eaf1fe',
    color: '#1c58f4',
  },
  {
    bg: '#fff7e5',
    color: '#feab13',
  },
];
ReactDOM.render(
  <div className="tag-list">
    <h4>primary</h4>
    <TagGroup>
      {presetColors.map(color => (
        <Tag type='primary' key={`p_p_${color}`} color={color}>{color}</Tag>
      ))}
    </TagGroup>

    <h4>normal</h4>

    <TagGroup>
      {presetColors.map(color => (
        <Tag type='normal' key={`p_n_${color}`} color={color}>{color}</Tag>
      ))}
    </TagGroup>

    <h4>custom colors</h4>
    <TagGroup>
      {presetColors2.map(color => (
        <Tag key={`p_c_${color.bg}`} type='normal' style={{ backgroundColor: color.bg, borderColor: color.bg }}>
          <span style={{ color: color.color }}>{color.color}</span>
        </Tag>
      ))}
    </TagGroup>
  </div>,
  document.getElementById('tag-demo-4'),
);