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

import { tailwind } from '../styles/tailwind.js';

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

      /*
       * An element selector rather than a utility class: repeating the same
       * six classes on every inline <code> would be worse than one rule. The
       * theme variables come from the document, which custom properties reach
       * into shadow roots, and the fallbacks cover the case where they do not.
       */
      code {
        padding: 0.15em 0.4em;
        border-radius: 0.25rem;
        background: color-mix(in srgb, currentColor 10%, transparent);
        font-family: var(--font-mono, ui-monospace, monospace);
        font-size: 0.9em;
      }
    `,
  ];

  override render() {
    return html`
      <h1 class="mb-4 text-2xl font-semibold tracking-tight">About</h1>
      <p class="mb-4 text-zinc-500 dark:text-zinc-400">
        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 class="list-disc space-y-1.5 pl-5 text-zinc-500 dark:text-zinc-400">
        <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;
  }
}