import { Badge } from '../../Atoms/Badge/Badge';

export const TagList = ({
  tags = [],
  onRemove,
  variant = 'default',
  className = '',
  ...props
}) => {
  if (tags.length === 0) return null;

  return (
    <div className={`flex flex-wrap gap-2 ${className}`} {...props}>
      {tags.map((tag, index) => {
        const tagLabel = typeof tag === 'string' ? tag : tag.label;
        const tagVariant = typeof tag === 'string' ? variant : tag.variant || variant;

        return (
          <Badge key={index} variant={tagVariant}>
            {tagLabel}
            {onRemove && (
              <button
                onClick={() => onRemove(index)}
                className="ml-2 hover:text-gray-800"
              >
                ×
              </button>
            )}
          </Badge>
        );
      })}
    </div>
  );
};

export default TagList;

