import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';

/** Example second route. */
@customElement('about-page')
export class AboutPage extends LitElement {
  static override styles = css`
    :host {
      display: block;
    }

    h1 {
      margin: 0 0 1rem;
      font-size: 1.75rem;
      letter-spacing: -0.02em;
    }

    p {
      margin: 0 0 1rem;
      color: var(--app-color-muted, #63636b);
    }

    ul {
      margin: 0;
      padding-left: 1.1rem;
      color: var(--app-color-muted, #63636b);
    }

    li {
      margin-bottom: 0.4rem;
    }
  `;

  override render() {
    return html`
      <h1>About</h1>
      <p>
        This route is rendered by the router controller in
        <code>app-root</code>. Add a route by extending the array passed to
        <code>new Router(...)</code>.
      </p>
      <ul>
        <li>Patterns use URLPattern syntax, so <code>/users/:id</code> works.</li>
        <li>Matched groups arrive as the <code>params</code> argument.</li>
        <li>Use <code>Routes</code> for nested routing inside a page.</li>
      </ul>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'about-page': AboutPage;
  }
}