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 was rendered on the server and then hydrated. Add a route by extending
        the <code>routes</code> array in <code>src/routes.ts</code>
        — the server and the browser both read it.
      </p>
      <ul>
        <li>The route table is plain data, so it runs in Node and in the browser.</li>
        <li>
          Swap the exact match for <code>URLPattern</code> to support
          <code>/users/:id</code>.
        </li>
        <li>
          Anything touching <code>window</code> belongs in <code>connectedCallback</code>.
        </li>
      </ul>
    `;
  }
}

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