interface MyComponentState {
  count: number;
  label: string;
}

class MyComponent extends BaseWebComponent<MyComponentState> {
  static override componentName = 'my-component';
  
  protected override initialState = {
    count: 0,
    label: 'Default'
  };

  // Example of binding an event handler
  private handleClick = this.bindMethod(this.onClick);

  private onClick(e: Event): void {
    this.setState({ 
      count: this.state.count + 1,
      label: `Clicked ${this.state.count + 1} times`
    });
  }

  protected override attachEventListeners(): void {
    this.addEventListener(this.$component, 'click', this.handleClick);
  }

  protected override render(): void {
    this.$component.innerHTML = `
      <h2>${this.state.label}</h2>
      <p>Count: ${this.state.count}</p>
      <button>Click me</button>
    `;
  }
}

// Register the component
MyComponent.define();