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

/** Molecule: the CIBG Huisstijl "bevestiging" (confirmation) — an animated green
    checkmark banner shown at the end of an aanvraagproces, ONLY when the user has
    nothing left to do (see designsystem.cibg.nl/componenten/bevestiging). Follow-up
    content (a reference number, a restart button) is projected below the banner. */
@Component({
  selector: 'app-confirmation',
  template: `
    <div class="confirmation">
      <svg
        class="confirmation__checkmark"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 52 52"
        height="52"
        width="52"
      >
        <circle class="confirmation__checkmark-circle" cx="26" cy="26" r="18" fill="none" />
        <path class="confirmation__checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
      </svg>
      <div class="confirmation__title">
        <span class="visually-hidden">{{ successPrefix() }}</span
        >{{ title() }}
      </div>
    </div>
    <ng-content />
  `,
})
export class ConfirmationComponent {
  title = input.required<string>();
  successPrefix = input($localize`:@@confirmation.succes:Succes:`);
}
