import { ChangeDetectionStrategy, Component } from '@angular/core';
import {
  PiActionButtonComponent,
  PiIconComponent,
  PiTextColorDirective,
  PiTextMediumDirective,
  PiTextSmallDirective,
  PiTextWeightBoldDirective,
  PiTextXLargeDirective,
} from '@pi/ui';

/**
 * What an address with nothing at it shows. Rendered by `PageShell`, which
 * also sets the 404 status, the title and `noindex` — the middleware answers
 * 404 up front for addresses no record could ever live at.
 *
 * Composed from the library's parts rather than from `pi-empty-state`, which
 * would have been the obvious fit: it renders its title as an `<h4>`, and a
 * page whose only heading is an `h4` has no `h1` at all. `pi-not-found`, the
 * library's own version of this page, is unusable here for a different reason
 * — it renders a `pi-headline` pointing at an illustration on the collective's
 * CDN and translates its text through an HTTP loader.
 */
@Component({
  selector: 'app-not-found',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    PiIconComponent,
    PiActionButtonComponent,
    PiTextXLargeDirective,
    PiTextMediumDirective,
    PiTextSmallDirective,
    PiTextColorDirective,
    PiTextWeightBoldDirective,
  ],
  styleUrl: './not-found.scss',
  template: `
    <main class="not-found">
      <div class="landing-shell not-found__inner">
        <p class="landing-eyebrow">404</p>

        <pi-icon icon="search" size="x-large" color="grey" />

        <h1 xl bold class="not-found__title">Esta página no existe</h1>

        <p m pi-color color="grey" class="not-found__lead">
          La dirección puede haber cambiado. Vuelve al inicio y sigue desde ahí.
        </p>

        <a class="not-found__home" href="/">
          <pi-action-button
            size="large"
            color="primary"
            text="Ir al inicio"
            [hasIcon]="true"
          />
        </a>

        <p s pi-color color="grey" class="not-found__note">
          Si has llegado desde un enlace nuestro, cuéntanoslo.
        </p>
      </div>
    </main>
  `,
})
export class NotFound {}