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 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 class="list-disc space-y-1.5 pl-5 text-zinc-500 dark:text-zinc-400">
        <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;
  }
}