import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Account } from '../../../models/account.model';
import { ButtonComponent } from '../button/button.component';

@Component({
  selector: 'app-account-card',
  standalone: true,
  imports: [CommonModule, ButtonComponent],
  template: `
    <div class="bg-[var(--color-surface-container-highest)] ghost-border rounded-sm p-4 hover:bg-[color-mix(in_srgb,var(--color-surface-bright)_10%,transparent)] transition-colors group flex items-center justify-between">
      <div class="flex flex-col">
        <h3 class="text-[var(--color-on-surface)] font-inter font-medium text-lg m-0">{{ account.serviceName }}</h3>
        @if (account.decryptedData?.['login']) {
          <p class="text-[var(--color-on-surface-variant)] font-jetbrains text-sm m-0 mt-1">
            {{ account.decryptedData?.['login'] }}
          </p>
        }
      </div>
      
      <div class="opacity-0 group-hover:opacity-100 transition-opacity flex gap-2">
        <app-button variant="secondary" size="sm" (clicked)="copyClicked.emit(account)">Copy</app-button>
        <app-button variant="secondary" size="sm" (clicked)="editClicked.emit(account)">Edit</app-button>
      </div>
    </div>
  `
})
export class AccountCardComponent {
  @Input() account!: Account;
  @Output() copyClicked = new EventEmitter<Account>();
  @Output() editClicked = new EventEmitter<Account>();
}
