import React from 'react';

export type TagColor = 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'gray' | 'cyan' | 'orange';

interface TagProps {
  color?: TagColor;
  children: React.ReactNode;
  className?: string;
  size?: 'default' | 'sm' | 'lg';
  closable?: boolean;
  clickable?: boolean;
  onClose?: () => void;
}

export function Tag({ 
  color = 'blue', 
  children, 
  className = '',
  size,
  closable = false,
  clickable = false,
  onClose
}: TagProps) {
  const sizeClass = size ? `tag-${size}` : '';
  const closableClass = closable ? 'tag-closable' : '';
  const clickableClass = clickable ? 'tag-clickable' : '';

  const handleClose = (e: React.MouseEvent) => {
    e.stopPropagation();
    onClose?.();
  };
  
  return (
    <span className={`tag tag-${color} ${sizeClass} ${closableClass} ${clickableClass} ${className}`}>
      {children}
      {closable && (
        <span className="tag-close-icon" onClick={handleClose}>
          <i className="ri-close-line"></i>
        </span>
      )}
    </span>
  );
} 