export abstract class Component<P extends object = object> {
  protected element: HTMLElement;
  protected props: P;

  constructor(props: P) {
    this.props = props;
    this.element = this.createElement();
    this.bindEvents();
  }

  protected abstract template(): string;

  protected createElement(): HTMLElement {
    const wrapper = document.createElement('div');
    wrapper.innerHTML = this.template().trim();
    return wrapper.firstElementChild as HTMLElement;
  }

  protected bindEvents(): void {
    // Override in subclasses
  }

  public mount(container: HTMLElement): void {
    container.appendChild(this.element);
  }

  public unmount(): void {
    this.element.remove();
  }

  public update(props: Partial<P>): void {
    this.props = { ...this.props, ...props };
    const newElement = this.createElement();
    this.element.replaceWith(newElement);
    this.element = newElement;
    this.bindEvents();
  }

  public getElement(): HTMLElement {
    return this.element;
  }
}