import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'internal-text-renderer',
  styleUrl: 'text-renderer.css',
  shadow: true
})
export class InternalTextRenderer {
  @Prop() content: string = '';
  @Prop() autoLink: boolean = true;
  @Prop() highlightCode: boolean = false;
  @Prop() preserveWhitespace: boolean = true;

  private processContent(): string {
    if (!this.content) return '';
    
    let processedContent = this.content;
    
    // 保留换行符
    if (this.preserveWhitespace) {
      processedContent = processedContent.replace(/\n/g, '<br>');
    }
    
    // 自动链接识别
    if (this.autoLink) {
      const urlRegex = /(https?:\/\/[^\s]+)/g;
      processedContent = processedContent.replace(urlRegex, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>');
    }
    
    // 代码高亮（简单实现）
    if (this.highlightCode) {
      const codeRegex = /`([^`]+)`/g;
      processedContent = processedContent.replace(codeRegex, '<code>$1</code>');
    }
    
    return processedContent;
  }

  render() {
    return (
      <div class="text-renderer" innerHTML={this.processContent()}></div>
    );
  }
}