import React from 'react';
import './Tag.css';

/**
 * Kole UI Tag（React）
 * 对齐设计令牌：bg #F0F5FF / color #2F54EB / 圆角 2px / padding 1px 8px
 *
 * props:
 *  - color   : '' | 'blue' | 'green' | 'red' | 'orange' | 'gray' | 自定义 hex
 *  - dot     : Boolean（圆点模式）
 *  - closable: Boolean
 *  - onClose()
 *  - children: 标签内容
 */
export default function Tag({ color = '', dot = false, closable = false, onClose, children }) {
  const PRESET = ['green', 'red', 'orange', 'gray'];
  const isCustom = !!color && !PRESET.includes(color) && color !== 'blue';

  const cls = ['kole-tag'];
  if (dot) cls.push('kole-tag-dot');
  if (isCustom) cls.push('kole-tag-custom');
  else if (color && color !== 'blue') cls.push('kole-tag-' + color);

  const style = isCustom ? { '--kole-tag-color': color, '--kole-tag-bg': hexToTint(color) } : undefined;

  return (
    <span className={cls.join(' ')} style={style}>
      {children}
      {closable && (
        <i className="kole-tag-close" title="移除" onClick={(e) => { e.stopPropagation(); onClose && onClose(); }}>×</i>
      )}
    </span>
  );
}

function hexToTint(hex) {
  const h = hex.replace('#', '');
  const r = parseInt(h.slice(0, 2), 16), g = parseInt(h.slice(2, 4), 16), b = parseInt(h.slice(4, 6), 16);
  return `rgba(${r},${g},${b},0.1)`;
}

/*
用法示例：
import Tag from './Tag';
<Tag color="green" dot>已发布</Tag>
<Tag color="#722ED1" closable onClose={handleClose}>紫色</Tag>
*/
