import { Component, Input } from '@angular/core';
import { NgIf } from '@angular/common';

@Component({
  standalone: true,
  selector: 'app-error-msg',
  imports: [NgIf],
  template: `
    <div *ngIf="msg" class="alert alert-danger border">
      {{ msg }}
    </div>
  `,
  styles: `
    .alert {
      color: white;
      background-color: red;
      border-radius: 4px;
      padding: 4px;
    }

    .alert-danger {
      background-color: red;
    }

    .border {
      border: 10px solid hotpink;
      animation: rotate 0.5s linear infinite;
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(180deg);
      }
    }
  `,
})
export class ErrorMsgComponent {
  @Input()
  msg: string | null = null;
}