import {
  initRouter,
  Route,
  ViewChild,
  Component,
  ComponentInput,
  ComponentDefinition,
} from "./node-pwa.js";

class TestComponent extends Component {
  static get definition() {
    return new ComponentDefinition({
      name: "test-component",
      template: `<div>
        <h1>Test Component</h1>
        <p>This is a test component.</p>
        <button id="test-button" (click)="incrementCount()">Count: {{count()}}</button>
        <input type="text" [(value)]="name" placeholder="Enter your name" />
        <p>Hello, {{name()}}! Counter is {{count()}}</p>
      </div>`,
    });
  }

  count = new ComponentInput(0);
  name = new ComponentInput("World");

  incrementCount() {
    this.count++;
  }
}

const route1 = new Route("counter", TestComponent);
const route2 = new Route("counter/:count", TestComponent);
initRouter("routerOutlet", "styleOutlet", [route1, route2]);