import { Component, input } from '@angular/core';

/** Molecule-shaped teaching card: the showcase's "before/after" box. Renders its own
    tag pill and, when `code` is set, the highlighted snippet — everything else comes in
    via `<ng-content />`. Angular does not style projected content from the receiving
    component, so any other card-shaped block inside a section (a sub-label, a nested
    ok/err result) nests another `<app-concept-card>` rather than writing raw `.tag`
    markup — that markup would carry the SECTION's scope, not this component's, and the
    rule here would never match it. */
@Component({
  selector: 'app-concept-card',
  imports: [],
  styles: [
    `
      .card {
        border: 1px solid var(--rhc-color-grijs-200);
        border-radius: 10px;
        padding: 1.25rem;
        background: var(--rhc-color-wit);
      }
      .card--bad {
        border-color: var(--rhc-color-rood-300);
      }
      .card--good {
        border-color: var(--rhc-color-groen-300);
      }
      .tag {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-weight: 700;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin: 0 0 0.75rem;
      }
      .tag::before {
        content: '';
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 50%;
      }
      .tag.bad {
        color: var(--rhc-color-rood-600);
      }
      .tag.bad::before {
        background: var(--rhc-color-rood-500);
      }
      .tag.good {
        color: var(--rhc-color-groen-700);
      }
      .tag.good::before {
        background: var(--rhc-color-groen-500);
      }
      .tag.plain {
        color: var(--rhc-color-grijs-700);
      }
      .tag.plain::before {
        display: none;
      }
      .linked {
        margin: 0 0 1rem;
      }
      .linked .src {
        font-size: 0.72rem;
        color: var(--rhc-color-grijs-700);
        margin: 0.35rem 0 0;
        font-family: monospace;
      }
    `,
  ],
  template: `
    <div
      class="card"
      [class.card--good]="variant() === 'good'"
      [class.card--bad]="variant() === 'bad'"
    >
      <p
        class="tag"
        [class.good]="variant() === 'good'"
        [class.bad]="variant() === 'bad'"
        [class.plain]="variant() === 'plain'"
      >
        {{ tag() }}
      </p>
      @if (code(); as c) {
        @if (src(); as s) {
          <figure class="linked">
            <pre class="app-code" [innerHTML]="c"></pre>
            <figcaption class="src">↳ {{ s }}</figcaption>
          </figure>
        } @else {
          <pre class="app-code" [innerHTML]="c"></pre>
        }
      }
      <ng-content />
    </div>
  `,
})
export class ConceptCardComponent {
  variant = input<'good' | 'bad' | 'plain'>('plain');
  tag = input.required<string>();
  code = input<string | undefined>();
  src = input<string | undefined>();
}