import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
 selector: 'app-eye-toggle',
 standalone: true,
 imports: [CommonModule],
 template: `
 <button
 type="button"
 class="eye-toggle"
 [class.variant-signin]="variant === 'signin'"
 [class.variant-signup]="variant === 'signup'"
 (click)="onToggle()"
 [attr.aria-label]="pressed ? 'Hide password' : 'Show password'"
 [attr.aria-pressed]="pressed"
 >
 <i [ngClass]="pressed ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'" aria-hidden="true"></i>
 </button>
 `,
 styleUrls: ['./eye-toggle.component.css']
})
export class EyeToggleComponent {
 @Input() pressed = false;
 // new input variant: 'signin' | 'signup'
 @Input() variant: 'signin' | 'signup' = 'signin';
 @Output() toggle = new EventEmitter<void>();

 onToggle() {
 this.toggle.emit();
 }
}