import { CurrencyPipe, DatePipe } from '@angular/common';
import { Component, computed, input } from '@angular/core';

interface <%= classify(name) %>Transaction {
  id: string;
  date: string;
  description: string;
  amount: number;
  status: string;
  merchant?: string;
  category?: string;
  currencyCode?: string;
}

const DEFAULT_TRANSACTIONS: readonly <%= classify(name) %>Transaction[] = [
  {
    id: 'txn-1001',
    date: '2026-07-24',
    description: 'Depósito de folha de pagamento',
    amount: 4200,
    status: 'Compensado',
    category: 'Receita',
  },
  {
    id: 'txn-1002',
    date: '2026-07-25',
    description: 'Compra no cartão',
    merchant: 'Mercado',
    amount: -86.35,
    status: 'Pendente',
    category: 'Supermercado',
  },
];

let nextId = 0;

@Component({
  selector: '<%= selector %>',
  imports: [CurrencyPipe, DatePipe],
  templateUrl: './<%= dasherize(name) %>.html',
  styleUrl: './<%= dasherize(name) %>.css',
})
export class <%= classify(name) %> {
  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;

  readonly title = input('Transações recentes');
  readonly currencyCode = input('BRL');
  readonly emptyMessage = input('Nenhuma transação encontrada.');
  readonly transactions = input<readonly <%= classify(name) %>Transaction[]>(DEFAULT_TRANSACTIONS);

  protected readonly captionId = computed(() => `${this.instanceId}-caption`);

  protected transactionCurrency(transaction: <%= classify(name) %>Transaction): string {
    return transaction.currencyCode ?? this.currencyCode();
  }

  protected amountDescription(transaction: <%= classify(name) %>Transaction): string {
    return `${transaction.amount < 0 ? 'Débito' : 'Crédito'} ${Math.abs(transaction.amount)}`;
  }
}