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

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

/** Rendered by the router's `fallback` when no route matches. */
@customElement('not-found-page')
export class NotFoundPage extends LitElement {
  static override styles = [
    tailwind,
    css`
      :host {
        display: block;
      }

      /*
       * Tailwind's preflight strips the default link underline, but preflight
       * is document-level and is not adopted into shadow roots, so the reset
       * is repeated here.
       */
      a {
        text-decoration: none;
      }
    `,
  ];

  override render() {
    return html`
      <h1 class="mb-2 text-2xl font-semibold tracking-tight">Page not found</h1>
      <p class="text-zinc-500 dark:text-zinc-400">
        That route does not exist.
        <a
          href="/"
          class="text-indigo-600 hover:underline focus-visible:outline-2
          focus-visible:outline-offset-2 focus-visible:outline-indigo-500
          dark:text-indigo-400"
          >Go home</a
        >.
      </p>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'not-found-page': NotFoundPage;
  }
}